Hover over one element that will effect another

Question

I have the following code:

.tratoresList h3{
    font-family: "opensans-light-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
    text-align: center;
}
.tratoresList strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
}
.tratoresList strong, .tratoresList h3:hover{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

When I pass the mouse inside the h3 he has to do the Hover also in the strong and vice versa.

What I did wrong?

Answer 1

That’s not how the dial , works: it makes two independent selections and applies the style to both. In this case, it will apply both to .tratoresList strong (overriding the previous rule) as to the .tratoresList h3:hover.

Make the Hover about an element affect a different element is a little bit complicated using only CSS (and its symmetry - "and vice versa" - makes things even worse). In some situations there is a relatively simple solution, as in the case of doing Hover in one element and affect only others, or when the affected item is a brother who succeeds the first. But I don’t know any way to do what you want using CSS2 or even CSS3.

In the future, in CSS4, it should be possible to do this using :has - the presence of a child or descendant is verified but the ancestor is even selected. I’m not sure how it works exactly (since not even CSS3 is 100% available, and CSS4 is still in draft and may change until it is "released") but it is said that it will be similar to what is done today in jQuery:

.tratoresList:has(strong:hover, h3:hover) strong,
.tratoresList:has(strong:hover, h3:hover) h3 {
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

That is, "apply this style to strong or h3, who is the son of a .tratoresList who has a descendant strong:hover or a h3:hover".

Again, I’m not sure that’s exactly how it’s going to work, and in any way browser gives support to the above rule. To do what you want, in general, only with Javascript. However, can be that in your specific case there is a solution only with the current tools, so if post your HTML code we can see whether or not it is possible to do what you want (I doubt, given the symmetry, but there is always hope).

Answer 2

If I understand well, the H3 is the brother of STRONG, then it is perfectly possible to do just with CSS. Below is an example:

.tratoresList h3{
    font-family: "opensans-light-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
    text-align: center;
}
.tratoresList strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
}
.tratoresList h3:hover + p > strong {
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

<ul>
    <li class="tratoresList">
        <h3>A</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
    <li class="tratoresList">
        <h3>B</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
    <li class="tratoresList">
        <h3>C</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
</ul>

Just to understand the .tratoresList h3:hover + p > strong, whenever the mouse is over the element H3 (that is inside an element with class 'tractor'), it will apply the effect to the whole STRONG that is inside your brother element P.