Hover over one element that will effect another

Asked

Viewed 6,158 times

3

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?

css

2 answers

4

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).

  • +1. Probably if he puts the code will be able to see if it has to drag the Strong into the "umbrella" of H3, or at least pass the Hover pro container.

  • 1

    True. But if the desired effect is something like that I find it quite unlikely that it can be done only via CSS... :(

  • @mgibsonbr his answer was very expensive, I will be able to test only later. However, I understood his example.

1

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.

  • Actually the AP did not specify what your HTML is like, this one I invented from my head to exemplify... Otherwise, your suggestion would be good, except for the "vice versa" part: neither the selector + nor the ~ find elements behind that being selected. That is, it is not possible to pass the mouse over the strong apply a style to h3 using these selectors. :(

  • In fact, I subbed that that was the CSS-based framework @Felipe Stoker posted. You could be sure that among the elements, in css, there was a higher sign (>) indicating that the element H3 is exactly the first child element of tratoresList . As for the vice versa, unfortunately there is no way to do just with CSS same =(. Looking now calmly, I noticed that in the question he questions the vice versa.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.