Changing Font Color of <A> Contained Within <Li>, But on Hover Over <Li>

Changing font color of a contained within li, but on hover over li

The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>:

li a { display: block; }
li a:hover { background-color: green; }

Change text color when hovered over li

Then ensure that either the a inherits its colour from its parent:

li:hover a {
    color: inherit;
}

Or specify a selector to explicitly apply the same colour to the a element:

#nav ul li:hover,
#nav ul li:hover a {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

You could, of course, also make the a fill the li element, using:

#nav ul li a {
    display: block;
}

If you specify a height for the li, then use that same height (with the previous display: block rule) the a will be vertically-centred within the li as well, for example:

#nav ul li {
    height: 2em; /* or whatever, adjust to taste... */
}
#nav ul li a {
    display: block;
    line-height: 2em;
}

Though the padding of the li won't be included within the specified height (it'll be the height of the element, plus the padding plus the border-width), so there'll be an empty-space around the a, unless you specify (for compliant browsers) box-sizing: border-box; to include the border and padding in the specified height.

Change color of single li on hover

Seems like you added the ul element after your class selector that already is the ul element.

Compare these two lines you wrote:

.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;} <-- .tags-list and ul is the same element and not nested

The first one accesses the element correctly, and the second one (which is causing the problem) does not match any elements, because it would need a nested ul element.

make hover on liitem/li change text colour too... CSS trick?

I'd recommend making the hover work on the 'A' elements instead of the LI elements.

In order to make the LI elements flly clickable you need to set the 'A' element within it to display:block (or inline-block) as 'A' tags are display:inline by default.

SO...

<ul>
 <li><a href="#">My Link</a></li>
</ul>

ul li a {
 display:block;
}

ul li a:hover, ul li a:focus {
 color:red;
}

Change font color of H2 inside div upon hover-over

Add this rule:

.well.sb:hover h2{
  color: #FFF;
}

.well.sb:hover {  color: #FFF;  background-color: blue;}.well.sb {  background-color: green;  width: 400px;  height: 200px;}h2 {  color: yellow;}.flag {  background-color: #000;  color: red;}
.well.sb:hover h2{  color: #FFF;}

<div class="well sb">  <h2>This text should change color and become white on hover-over</h2>  <div class="flag">FLAG</div></div>

How to change all font color when hovering over an li

You need to apply the hover effect separately to your discProd class, like so:

#selectable li:hover {background: orange; color: white; }
#selectable li:hover .discProd {background: orange; color: white; }

On hover change text color

You have wrong order elements of classes here:

.show:hover .navigation-bar li a {
  color: black;
}

This one would be correct:

.navigation-bar .show:hover li a {
  color: black;  
}

change font color of content under ul , on hover

i guess you have a space here:

.btnClear:hover , li ul.btnClear :hover, ul#conversation li ul:hover{
//------------------------------^^

That could be the issue.

It should be:

.btnClear:hover , li ul.btnClear:hover, ul#conversation li ul:hover{

without any space for psuedo selector.

---

I need all text content under the entire ul.

In this case you can try with this:

.btnClear:hover , li ul.btnClear:hover a, ul#conversation li ul:hover{
//------------------------------^^^^^^^^

A simple test case:

.b:hover a {  color: red;}

<ul class='a'>  <li>asdfasfd</li>  <li>asdfasfd</li>  <li>asdfasfdasd    <ul class='b'>      <li><a>asdfasfd</a></li>      <li><a>asdfasfd</a></li>      <li><a>asdfasfd</a></li>    </ul>  </li></ul>

Change text and link-color inside list-element on hover

Anchor tags don't inherit attributes such as color when the href attribute is present.

You can use multiple selectors to apply the same style, separate them with a comma.

ol.tracklist li:hover, ol.tracklist li:hover a {
    background-color: #D21600;
    color: #FFFFFF;
}

---

Related Topics