CODEWITHSUNDEEP
css
Scott Dempasy
Scott Dempasy

Reputation: 63

Disable the default active when hover

Here is example for my code

<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>

If you mouse over on blog, there will be two red words i am trying to find a way to disable "home" when you mouse over any other word and then it back red if you moved the mouse away After long search with google, i finnally found javascript code And tried to modify it to work, but no luck

Upvotes: 1

Views: 119

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.

<style>
  .menu:hover .active {
    color: black;
    /*reset the color to the default*/
    /*you could also use color: inherit*/
  }
  .hover:hover,
  .active,
  .menu:hover .active:hover {
    color:red
  }
</style>
<ul class="menu">
    <li class="hover active">Home</li>
    <li class="hover">blog</li>
    <li class="hover">about</li>
    <li class="hover">port</li>
    <li class="hover">contact</li>
</ul>

Upvotes: 3

happymacarts
happymacarts

Reputation: 2595

One thing I am noticing right off is the improper markup there is no

that may not have anything to do with it. 

<style>
.hover:hover,.active{color:red}
</style>
<ul>
    <li class="hover active">Home</li>
    <li class="hover">blog</li>
    <li class="hover">about</li>
    <li class="hover">port</li>
    <li class="hover">contact</li>
</ul>

not exactly sure what you are trying to do

here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/

maybe paste the js code you found and see if we can figure out your issue

Upvotes: 0

Related Questions