CODEWITHSUNDEEP
jqueryhtmlcss
Keivan Sabil...
Keivan Sabil...

Reputation: 95

setting bold font to each <li> when hover it

I like to construct my program in way that when I mouseover to certain <li> its font-weight changes to Bold , other <li>'s still had normal font-weight and when I mouseout from that special <li> its font returns to Normal ! it have to work for all <li> tags...

In my code if I a:hover its and childes font-weight's will set to bold(its not what I want) !

Its good to me if I a:hover or a1:hover just a or a1 font-weight changes to bold .

Here is the Fiddle.

<ul>
    <li>a
        <ul>
            <li>a1</li>
            <li>a2</li>
        </ul>
    </li>
    <li>b
        <ul>
            <li>b1</li>
            <li>b2</li>
        </ul>
    </li>
</ul>

**CSS**

li{
        list-style-type:none;
}
ul li{
    float:left;
    width:100px;
    height:40px;
    background-color:pink;
    border:solid 1px black;
    list-style-type:none;
    text-align:center;
    margin-left:1px;
}
li ul li{
    margin-left:-41px;
    margin-top:0px;
    position:relative;
    z-index:100;
    clear:both;
}
li ul{
    margin-top:20px;
}
ul li ul {
    display:none;
}
li:hover ul{
    display:block;
}
ul > li:hover{
    font-weight:bold;
}

Upvotes: 0

Views: 1760

Answers (5)

Keivan Sabil...
Keivan Sabil...

Reputation: 95

finally I solved my problem myown : |

Here is the Fiddle.

HTML = 

<ul>
       <li>
               <div id="div_a">a</div>
                <ul>
                    <li><div class="c1">a1</div></li>
                    <li><div class="c1">a2</div></li>
                </ul>
        </li>
    </ul>

CSS = 

    li{
            list-style-type:none;
    }
    ul li{
        float:left;
        width:100px;
        height:40px;
        background-color:pink;
        border:solid 1px black;
        list-style-type:none;
        text-align:center;
        margin-left:1px;
    }
    li ul li{
        margin-left:-41px;
        margin-top:12px;
        position:relative;
        z-index:100;
        clear:both;
    }
    li ul{
        margin-top:20px;
    }
    #div_a:hover ,  .c1:hover{
        font-weight:bold;
    }

Upvotes: 0

Jonast92
Jonast92

Reputation: 4967

Here's an alternative answer to the basic CSS, using jQuery (since the question is tagged as such):

$("li").hover(function()
{
    $(this).css("font-weight", 'bold');
});

Working demo using jsFiddle

Edit

If you want it to work for every single sub-li then you must change the code to:

$("li li").hover(function()
{
    $(this).css("font-weight", 'bold');
});

Woring demo using jsFiddle

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

Simply use CSS like this:

li li:hover {
    font-weight: bold;
}

Erase your last CSS rule, too.

Hope this helps!

Upvotes: 5

Arber Braja
Arber Braja

Reputation: 445

Not perfectly sure if the jQuery method works, 100% that the css method should work though.

CSS:

li:hover {
    font-weight: bold;
}

jQuery:

$('li:hover').css('font-weight','bold');

Upvotes: 0

Wang
Wang

Reputation: 1038

Erase your last CSS rule and use :

ul li ul li:hover {
    font-weight: bold;
}

Upvotes: 1

Related Questions