Change span background on hover on another span

Question

I am trying to change background of second span when I am on first span. I mean when are you on that my row, then menu-settings-img changes background and menu-settings-title changes color of text. I tried doing it in css but I do not know really how to achieve this. Can you help me? My code:

<div class="row" style="margin-top: 10px;">
    <div style="margin-left: 50px;">
        <a href="" id="link-settings" href="">
        <div width="80%;">
          <span class="menu-settings-img">
            <img style="width: 4%;" src="{{(career.png) }}">
          </span>
          <span class="menu-settings-title">@lang('main.career')</span>
        </div>
        </a>
    </div>
</div>

use a container and through container hover do the changes .container:hover > .title { ... } — nullqube, Mar 18 '18 at 11:08

score 0 · Answer 1 · answered Mar 18 '18 at 10:44

You can make it using css with the + selector this way :

<style type="text/css">
.menu-settings-img:hover + span {
    background-color: #F0F;
}
</style>

<div class="row" style="margin-top: 10px;">
    <div style="margin-left: 50px;">
        <a href="" id="link-settings" href="">
        <div width="80%;">
          <span class="menu-settings-img">
            <img style="width: 4%;" src="http://placehold.it/300x300.jpg">
          </span>
          <span class="menu-settings-title">titre</span>
        </div>
        </a>
    </div>
</div>

The + selector points to the next cibling element. see this doc for more informations.

But when are you on hover of the second span that first span also should change — Promgrma, Mar 18 '18 at 10:48
your question is not clear to me then. Can you reformulate what you exactly want ? — kevinniel, Mar 18 '18 at 10:53

Change span background on hover on another span

1 Answers1