why there is opacity on image how to put no opacity on image and put hover function on div?


Tags: html,css

Problem :

I am trying to display the following image without any inherited opacity from the parent. The relevant code:

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>

The image has opacity from the parent that I do not want. Also, how do I put a hover style on a div?

Thank you.



Solution :

This is done through becoming more specific with your CSS.

For the img CSS:

#accordion ul li img {
        opacity:0;    
    }

To hover using CSS:

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

    CSS Howto..

    How do I animate background image size on hover smoothly in css?

    Understanding how CSS clear:both is supposed to work

    .NET - How to build themes for big CSS files

    How to implement a table structure using CSS

    css: how to center box div element directly in center?

    HTML: How to correctly format 4 elements on the same line?

    How to style more than one ul

    How to change nav text color when scrolled over other div anchors in the page

    Materialize CSS Showing errors on form fields

    How to target images with dynamically generated ids with CSS

    How is the force reload of javascript/css done in Symfony?

    css how to make the button in the middle of this code [closed]

    How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

    How to hide sliding div with css

    How to “clear” a CSS fake table row?

    How to make a ghost element in CSS?

    how to add hover effect to button using css

    How to change the scrolling text in CSS or JQuery

    How to make hovering over a class to trigger changes in other classes?

    How to avoid the div 'move' when mouse hover?

    How to disable select box hover color on css

    css divs display:none reseting and showing divs when function is called

    How should I do this in CSS?

    How to create a sticky footer in CSS inside an absolutely positioned div?

    How do I provide navigation options on the sides of a centered logo?

    hide/show html div with javascript

    How do I make my mobile website auto-adjust its screen resolution?

    R rmarkdown ioslides - How to include a segue slide?

    how to stop CSS animation without javascript

    Issue with changing how containers look based on values in an MD array