CODEWITHSUNDEEP
htmlcsshover
Micah
Micah

Reputation: 4550

CSS link and change property when hover

How can I change another class's property when one's hovering.

If I say I have A and B class, A has hover event, If I want to change inside of B when A hover, how can I do?

A:hover {}

B{ color:#FFF; }

A:hover + B{ color:#000;  } didnt work

Actually CSS

.has_child is inside of .navi

.navi > ul > li:hover 
+ .navi > ul > li > .has_child:after {
    color: #09F;
}

HTML

   <nav class="navi ">
    <ul>
      <li style="height:8px; width:8px; padding:0px; margin:0px;">&nbsp;
      </li>
      <li>
        <a href="#" class="MM_no_child">General Config</a>
      </li>
      <li>
        <a href="#" class="MM_has_child">Menu</a>
        <ul>
          <li style="height:8px; width:8px; padding:0px; margin:0px;">&nbsp;
          </li>
          <li>
            <a href="#" class="MM_no_child">English</a>
          </li>
          <li>&nbsp;
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="MM_no_child">User Level</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">User</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">Tag</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">Log</a>
      </li>
      <li>&nbsp;
      </li>
    </ul>
  </nav>

Thank you very much for your advice.

==============

Update

Seem like + operator will nor work if have > before.

A:hover + B{ color:#000; } will work fine.

A:hover + C > B{ color:#000; } will not work.

Upvotes: 1

Views: 165

Answers (2)

lante
lante

Reputation: 7336

.A must be inside .B

<div class="A">
    <div class="B">
        something
    </div>
</div>

then in your stylesheet:

.A:hover .B { some css code }

Upvotes: 1

bevacqua
bevacqua

Reputation: 48476

Works for me.

enter image description here

You should check your selectors. What browser are you using?

Upvotes: 2

Related Questions