Hover over one element that will take effect in another

This is not how the , selector works: it makes two independent selections and applies the style to both. In this case, it will apply both to .tratoresList strong (overwriting the previous rule) and .tratoresList h3:hover .

Making the hover on an element affect a different element is a bit tricky using only CSS (and its symmetry - "and vice versa" - makes things even worse). In some situations there is a relatively simple solution, such as making hover on one element and affect only others , or when the affected element is a brother who succeeds the first . But I do not know any way to do what you want using CSS2 or even CSS3.

In future, in CSS4, it should be possible to do this using :has - the presence of a child or descendant but even selects the ancestor. I'm not sure how exactly it works (since not even CSS3 is 100% available, and CSS4 is still in draft and can undergo changes until it is "released") but it is said to be similar to what is done today no 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 , which is the child of a .tratoresList that has a strong:hover descendant or a h3:hover ".

Again, I'm not sure that this is exactly how it will work, and in any case none of the current browser supports the above rule. To do what you want, in general, only with JavaScript itself. However may be that in your specific case there is a solution only with the current tools, so if you post your HTML code we can see if it is possible to do what you want (I doubt, given the symmetry , but there is always hope).

If I'm good, H3 is brother of STRONG , so it's perfectly possible to do only with CSS . Here 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 .tratoresList h3:hover + p > strong , whenever the mouse is on the H3 element (which is inside an element with class 'tractorsList'), it will apply the effect to all STRONG inside your brother element P .