How would I hover a sibling element?

Question

I'm working on a project, where I want the icon to change colour if hovered over, as well as the text that goes with the icon changing colour if the icon is hovered over, and vise versa.

/* CSS is simplified by Adam P. */
i:hover, 
.TopMenuBarText, 
h3:hover > i {
color: #51ae59;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class = "HeaderTopRow">
    <div class = "DSC">
        <i class="fas fa-comments" id = "icon1"></i>
        <h3 class = "TopMenuBarText" id ="top1">Discord Support Chat</h3>
    </div>
    <div class = "KB">
        <i class="fas fa-question" id = "icon2"></i>
        <h3 class = "TopMenuBarText" id ="top2">Knowledge Base</h3>
    </div>
    <div class = "Part">
        <i class="fas fa-handshake" id = "icon3"></i>
        <h3 class = "TopMenuBarText" id ="top3">Partners</h3>
    </div>
    <div class = "Specs">
        <i class="fas fa-server" id = "icon4"></i>
        <h3 class = "TopMenuBarText" id ="top4">Specs</h3>
    </div>
    <div class = "Node">
        <i class="fas fa-chart-bar" id = "icon5"></i>
        <h3 class = "TopMenuBarText" id ="top5">Node Stats</h3>
    </div>
    <div class = "Ddos">
        <i class="fas fa-chart-bar" id = "icon6"></i>
        <h3 class = "TopMenuBarText" id ="top6">DDos Stats</h3>
    </div>
</div>

However, when I hover over the text, the icon isn't changing colour, anyone know why? Any help would be greatly appreciated.

Sorry for the question, I'm extremely new to HTML and CSS, and am not sure about how the positioning of the code in the HTML file affects it in the CSS. Yet again, any help is greatly appreciated.

I've used font-awesome for my icons and h3 tags for my text.

@Ayoub, no it is not a duplicate of that one I do not believe.

@TylerH, sorry, mind linking me by any chance to some wiki detailing each operator? Does each operator change depending on its position in the HTML code? So if it's a child or parent etc, or does CSS not really know where it is positioned? I am deeply sorry if it is a duplicate, as I couldn't' find my answer in previous questions, apologies if I missed it.

You hover an adjacent, *subsequent* sibling with the `+` operator. A non-adjacent, *subsequent* sibling with the `~` operator. [There is not a previous sibling selector](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector). — TylerH, Dec 15 '20 at 17:20
The best resource for information on CSS is the CSS specifications, available at https://w3.org. If that's too technical (which it often is), you can use MDN (Mozilla Developer Network), which is certainly the second-best resource for learning/referencing HTML, CSS, or JavaScript anywhere. — TylerH, Dec 15 '20 at 17:35
You can change the structure of your html. Put the text **inside** `` and on adding hover styles, it will work. — Shounak Das, Dec 15 '20 at 17:49
The [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) element is a *phrasing element* and it would be perfectly legitimate to place it inside an `
`. Then the selector would be `h3 > i`. — Rounin, Dec 16 '20 at 10:57

How would I hover a sibling element?

`. Then the selector would be `h3 > i`.

0 Answers0