Question

我正在尝试显示以下图像而没有来自父级的任何继承的不透明度。相关代码：

CSS

     #accordion ul {

        width:184px;
        display:none;
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        opacity:0.70;
        list-style-type: none;  
    }

        #accordion ul li {

            width:184px;
            height:40px;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            font-size:17px;
            color:#999999;
            background:url(img/green.png) no-repeat 8% 50%, url(img/back_line.png) ;


        }

        /* styling of submenu item */ 
        #accordion ul li img {

            padding: 7px 8px 0px 35px ;
            width:30px;
            height:30px;

        }

        #accordion ul li:hover{
            width:184px;
            height:40px;
            background:url(img/green.png) no-repeat 8% 50%,#D5D5D2;
        }

        /* remove border bottom of the last item */
        #accordion ul li.last {
            border-bottom: none;
        }

HTML

<ul id="accordion">
    <li>
        <a href="#" class="item popular" rel="popular"></a>
        <ul id="inchat" class="list_friends">           
            <div><img src="facebook/49992_720384020_1896998575_q.jpg">Francois</div>
            <div><img src="facebook/48983_615523712_8495_q.jpg">Yue</div>
            <div><img src="facebook/41621_717814907_4472_q.jpg">Daivid</div>
        </ul>
    </li>
    <li>
        <a href="#" class="item category" rel="category"></a>
        <ul id="inchannel">

            <div><img src="facebook/49992_720384020_1896998575_q.jpg">Francois</div>
            <div><img src="facebook/48983_615523712_8495_q.jpg">Yue</div>
            <div><img src="facebook/41621_717814907_4472_q.jpg">Daivid</div>
        </ul>
    </li>
    <li>
        <a href="#" class="item comment" rel="comment"></a>
        <ul id="online">
            <div><img src="facebook/49992_720384020_1896998575_q.jpg">Francois</div>
            <div><img src="facebook/48983_615523712_8495_q.jpg">Yue</div>
            <div><img src="facebook/41621_717814907_4472_q.jpg">Daivid</div>
        </ul>
    </li>
</ul>

图像具有我不想要的父级的不透明度。另外，如何在hover上添加div样式？

谢谢。

Answer 1

这是通过更加具体的CSS来完成的。

对于img CSS：

#accordion ul li img {
        opacity:0;    
    }

使用CSS悬停：

#accordion div:hover {
     color:#FFF;
}

为什么图像上有不透明度如何在图像上放置不透明度并将悬停功能放在div上？

1 个答案: