新人问问题,li 中背景颜色问题,大神解答下

来源:2-3 鼠标浮动效果

裸奔的萝卜丝

2016-04-05 17:25

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" type="text/css" href="dh1.css">
    <script type="text/javascript" src="dh1.js"></script>
</head>
<body>
<div id="daoh">
<ul id='ul'>
    <div id="all">全部商品分类</div>
    <li><a href="#"><span color="black">电器、小商品、家用</span></a></li>
    <li><a href="#">衣服、鞋子、内裤</a></li>
    <li><a href="#">玻璃杯</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
    <li><a href="#">电器、小商品、家用</a></li>
</ul>
<div id='newpa'>
</div>
</body>
</html>

css 如下:

{
    margin: 0px,0px;
    padding: 0px;
}
#ul {
    width: 200px;
    display: black;
    border: 1px solid;
    color: white;
    margin-left:8px;
    padding-left: 8px;
    text-indent: 8px;
}
#all{
    width: 200px;
    height: 50px;
    line-height: 48px;
    font-size: 25px;
    background-color:#B1191A;
    padding-bottom: 5px;
    }

#ul li{
    display: block;
    list-style-type: none;
    text-decoration-style: none;
    width: 200px;
    height: 35px;
    background-color:#C81623;
    line-height: 33px;
    background-image: url(jiantou.PNG);
    background-repeat:no-repeat;
    background-position: right;
}      
a {
    color:white;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
    font-weight: bold;
    color: red;
}
li:hover
{
    display: block;
    background-image: none;
    background-color: white;
    border:1px solid  #DDD;
    border-right:0;
    box-shadow: 0 0 8px #DDD;
}

对li标签进行hover时发现有个问题,

鼠标经过时,

    background-image: none;
    background-color: white;

并未起作用,

边框和阴影出现了,

将 li:hover 前加上#ul ,能实现所有hover 效果;

后来测试时,写li 样式时,将#ul li{}  和#ul li:hover,可实现所有效果;

li{}和#ul li:hover{},可实现所有效果;

li{}和li:hover{} 可实现所有效果

唯独#ul li{}  和li:hover无法更改背景状态,但是边框和阴影都出现了,这个原因是?

http://img.mukewang.com/570384250001fdac03930412.jpg



写回答 关注

2回答

  • 慕婉清8325264
    2016-04-25 12:32:36

    我也是这个问题  我只在li hover 那里改变的背景颜色 之后可以正常显示效果 希望可以帮到你

    .topmenu li:hover{

    border: 1px solid #ddd;

    border-right:0;

    box-shadow: 0 0 8px #ddd;

    background: black;

    }


  • YGJ
    2016-04-05 18:12:50

    #ul li{
        display: block;
        list-style-type: none;
        text-decoration-style: none;
        width: 200px;
        height: 35px;
        background-color:#C81623;
        line-height: 33px;
        background-image: url(jiantou.PNG);
        background-repeat:no-repeat;
        background-position: right;
    }      

    代码第一行的  #ul   去除 即可!

    裸奔的萝卜丝

    您好,由于是新人,问题可能描述不清,我在问题最后描述,有过尝试,有过4组测试, 将#ul li{} 和#ul li:hover,可实现所有效果; li{}和#ul li:hover{},可实现所有效果; li{}和li:hover{} 可实现所有效果 唯独#ul li{} 和li:hover无法实现背景更改,但是边框和阴影出现了,4 组对比后,为什么就这一组无法实现所以所以效果而只是部分效果,个人还有一个疑问,整个代码里所以的li都在ul 下,应该不存在父元素的影响吧,

    2016-04-08 16:02:21

    共 1 条回复 >

商城分类导航效果

两种方法实现分类导航,同时扩展讲解其它商城分类导航的制作方法

63734 学习 · 313 问题

查看课程

相似问题