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 to apply CSS to half of a point feature?

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    how to make drag and drop jquery?

    How to segment a circle with different colors using CSS

    css how to align absolute positioned child element to the right of fluid width parent

    How to make images inside a box responsive CSS

    css - how to determine why a particular css rule is being overwritten

    How to style JavaScript created text using CSS's @font-face

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How do I do this CSS border-bottom

    How do I conditionally apply CSS styles in AngularJS?

    CSS How to change background color of text?

    How can I force an image to display in its entirety with CSS?

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    jQuery: How do I target the clicked element when they all share the same CSS class?

    How to get the sticky footer to work?

    How can I get Chrome to resize this div when the padding changes?

    How do i set the HTML tag's “background” property with JS, still allowing other properties from a CSS file to be unchanged?

    How to Create Diagonal Heading Line with Pure CSS

    How to vertically align label and input in Bootstrap 3?

    How can I make the ul contain li in its content box?

    How to invert colors using CSS on hover

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    how to change style of element when click on anchor

    How do I create a side menu navigation bar that opens items to the right [closed]

    How do I keep floated child divs from wrapping?

    How to hide first level span element by CSS “>” selector

    How to make resizable li elements with CSS only

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    How to add space after a colon in CSS with Sublime Text 2?