Question

My code is:

<div class="something">
    <a class="navbar-brand" href="#">
        <h1>hello</h1>
        <h2>world</h2>
        <h3>again!</h3><br/>
        <p>blah blah blah</p>
    </a>
</div>

Basically I need all the <h> elements and the <p> element to change color at the same time on hover of the <a> tag.

I've tried:

.navbar-brand *:hover{
     color:red;   
}

but this only changes color on hover of each individual element, not all of them at the same time.

I should also mention because it might be crucial, that the navbar-brand class is a bootstrap class.

Answer 1

这是正确的CSS：

.navbar-brand:hover {
   color:red;   
}

小提琴：https://jsfiddle.net/t4o0uffm/1/

Answer 2

直接定位a.navbar-brand:hover，而不是定位子元素

Answer 3

您可以像以下代码段那样执行此操作。

.navbar-brand:hover h1, 
.navbar-brand:hover h2, 
.navbar-brand:hover h3, 
.navbar-brand:hover h4, 
.navbar-brand:hover h5 {
    color: red;
}

<div class="something">
    <a class="navbar-brand" href="#">
        <h1>hello</h1>
        <h2>world</h2>
        <h3>again!</h3><br/>
        <p>blah blah blah</p>
    </a>
</div>

如何在<a> element change color on hover?

3 个答案: