Text and background color into a table
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>It seems simple, but it doesn't work. The background change its color, while the text not.
Where is my fault? How can I correct?
css html-table colors
migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26
This question came from our site for pro webmasters.
|
show 1 more comment
I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>It seems simple, but it doesn't work. The background change its color, while the text not.
Where is my fault? How can I correct?
css html-table colors
migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26
This question came from our site for pro webmasters.
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
1
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
Add your html too
– Viira
Nov 22 '18 at 12:35
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03
|
show 1 more comment
I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>It seems simple, but it doesn't work. The background change its color, while the text not.
Where is my fault? How can I correct?
css html-table colors
I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>It seems simple, but it doesn't work. The background change its color, while the text not.
Where is my fault? How can I correct?
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>css html-table colors
css html-table colors
edited Nov 22 '18 at 13:44
Brian Tompsett - 汤莱恩
4,2671339104
4,2671339104
asked Nov 22 '18 at 12:24
Acciaierie StahlbergAcciaierie Stahlberg
83
83
migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26
This question came from our site for pro webmasters.
migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26
This question came from our site for pro webmasters.
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
1
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
Add your html too
– Viira
Nov 22 '18 at 12:35
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03
|
show 1 more comment
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
1
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
Add your html too
– Viira
Nov 22 '18 at 12:35
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
1
1
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
Add your html too
– Viira
Nov 22 '18 at 12:35
Add your html too
– Viira
Nov 22 '18 at 12:35
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03
|
show 1 more comment
2 Answers
2
active
oldest
votes
Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>add a comment |
Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:
Also could you post your html as well?
td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430991%2ftext-and-background-color-into-a-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>add a comment |
Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>add a comment |
Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:
td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>td {
background-color: white;
color: black;
}
td:hover {
background-color: black;
color: white;
}
td:hover a { /* only target links in a td cell that is hovered */
color: white;
}<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>answered Nov 22 '18 at 13:07
PetePete
42.3k1879121
42.3k1879121
add a comment |
add a comment |
Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:
Also could you post your html as well?
td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>add a comment |
Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:
Also could you post your html as well?
td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>add a comment |
Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:
Also could you post your html as well?
td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:
Also could you post your html as well?
td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table> td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table> td {
background-color: white !important;
color: black !important;
}
td:hover {
background-color: black !important;
color: white !important;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>answered Nov 22 '18 at 12:52
WimanicesirWimanicesir
668212
668212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430991%2ftext-and-background-color-into-a-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
please provide your html code.
– Bhoomi patel
Nov 22 '18 at 12:32
1
Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones
– Pete
Nov 22 '18 at 12:32
It's might be cdn issue. check here
– DPS
Nov 22 '18 at 12:34
Add your html too
– Viira
Nov 22 '18 at 12:35
@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.
– Acciaierie Stahlberg
Nov 22 '18 at 13:03