Hover over an element that will take effect in another - html

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;
}
And here is the HTML, can someone say me what is wrong?
<ul class="margin-top-50 tratoresList">
<li>
<img src="./imagens/trator1.png" />
<h3>linha <strong>4000</strong></h3>
<div class="tratoresListArrow"></div>
</li>
When I hover within the h3 he has to do the hover also in strong and vice versa.
What did I do wrong?

Answer 1

.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, .tratoresList h3:hover ~ strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #a80000;
width: 210px;
}
<div class="tratoresList">
<h3>CSS - HOVER AN ELEMENT THAT WILL TAKE EFFECT IN ANOTHER</h3>
<strong>I THINK ITS POSSIBLE NOW !</strong>
</div>
I hope it helps you....

Answer 2

You cannot do this in CSS3 unless the strong element can be specified in the same selector as h3:hover (right now, this only works when the strong element is an sibling), however otherwise you cannot do "disjoint" effects using pure CSS, you must use scripting. Here's a quick example (that doesn't use jQuery for once). I haven't tested it - it might work, it might not. Have fun!
document.querySelectorAll(".tratoresList h3")forEach( function(el1) {
el1.addEventListener("mouseover", function() {
document.querySelectorAll(".tratoresList strong").forEach( function(el2) {
el2.classList.toggleClass("hoverEffect");
} );
});
} );

Answer 3

If you want to change the style of text in strong tags(inside h3) when you hover over h3..
.tratoresList h3:hover strong{
color: green;
}}