CODEWITHSUNDEEP
htmlcss
shinnc
shinnc

Reputation: 913

hover effect on menu bar divider

I have a menu bar

and I've decorated the menu with a symbol like # Home # About Us # Contact #.

So, what I want to achieve is when I mouse over an item, the item color will be changed, as well as the symbols beside. For example:

# Home # About Us # Contact Us #

# Home # About Us # Contact Us #

# Home # About Us # Contact Us #

Anyway to achieve this? Prefer not using javascript solution, thanks.

** Updated with HTML markup as requested, just a dummy solution for placing the symbols.

I think most of you have misunderstanding my question, what I wanted is NOT how to hover a list item, I want to hover the symbols which are surrounding the item.

//html
<nav>
  <ul>
    <li># Home </li>
    <li># About Us </li>
    <li># Contact Us #</li>
  </ul>
</nav>

//css
nav ul li {
  display: inline-block;
}
nav ul li:hover {
  font-weight: bold;
}

Upvotes: 1

Views: 1559

Answers (7)

Dieter
Dieter

Reputation: 441

An seo friendly example:

<html>
    <head>
        <style>
            nav li{
                display: inline-block;
                text-decoration: none;
                color: #000;
                cursor: pointer;
            }
            nav li:hover {
                font-weight: bold;
                color: #FF0000;
            }
            nav li:before, nav li:hover:after, nav li:last-child:after {
                content:" # ";
            }
            nav li:hover + li:before {
                content:"";
            }
        </style>
    </head>
    <body>
        <nav>
          <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Contact Us</li>
          </ul>
        </nav>
    </body>
</html>

Upvotes: 2

sandeep
sandeep

Reputation: 92813

May that's you want http://jsfiddle.net/cLnUW/ .Write like this:

HTML

<ul>     
     <li><span>#</span> Home </li>     
     <li><span>#</span> About Us </li>     
     <li><span>#</span> Contact Us</li>
     <li><span>#</span></li>        
</ul>

CSS

li {   display: inline-block; }
li:hover {   font-weight: bold; }
li:hover span, li:hover + li span{color:red;}

Upvotes: 3

zomboble
zomboble

Reputation: 833

<div id="navBar">
    <ul>
        <li><span class="symb">#</span> about</li>
        <li><span class="symb">#</span> home</li>
    </ul>
</div>

#navBar ul li:hover{
    color: red;
}
span.symb{
    padding-bottom:5px;
}

Using an unordered list like so and changing it with the hover pseudoselector

Upvotes: 0

Priyank Patel
Priyank Patel

Reputation: 7006

HTML

<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#menu ul li a:hover
{
    color:Green;
}
#menu ul li a:hover:before
{
content:"$";
}

#menu ul li a:before
{
content:"#";
}

SAMPLE ​

Upvotes: 0

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

try using css :hover

​ul li:hover{
  color: black;
  font: 14px;
  font-weight: bold;
}​

Upvotes: 0

user1305989
user1305989

Reputation: 3361

Demo solution : http://jsfiddle.net/PBrkX/

The below code uses sample html to show how hover works:

 <span id='home_sym'> # Home </span>
    <span id='about_sym'> # About Us </span> 
   <span id='contact_sym'> # Contact Us </span>

  css :

  #home_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

   #about_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

    #contact_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

Upvotes: -1

user1726343
user1726343

Reputation:

You can use the :hover pseudoselector, along with a before pseudoselector. Eg.

.about:hover{
    color:#ff0000;
}
.about:hover:before{
    content:"->";
}

The before pseudoselector prepends some content to the element, in this case an arrow.

Upvotes: 0

Related Questions