css悬停时更改属性

Question

Is there a way to change the css property for example of a box when an element (inside the ) is hover?

for example if I have:

<table>
<tr><td><a>.....</td></tr>
</table>

I want to change the property of the container td when the link a has the mouse over. Is it possible?

Sorry, I have not explained well. I have a , not a table...it was only an example.... I have

<ul>
<li><a>.....

in my css I have:

#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}

but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...

Answer 1

Instead of

#navigation li a:hover {

try

#navigation li:hover a {

Answer 2

but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...

That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:

li:hover a {
    color: #d2d2d2;
}

This basically says "when the li is hovered, the link inside it should change to these styles."

Alternatively, you can add padding to the link (ex - padding: 5px ), making its reaction field larger. So:

li a {
  display: block; /* Required to make it honor padding. */
  padding: 10px;
}

li a:hover {
  color: #d2d2d2;
}

As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.

Answer 3

You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:

table td:hover {
    background-color: red;
}

Answer 4

您可以在锚元素上添加display：块，这将使锚填满li ...取决于ul等的缩进等。

li a { display: block; }