Deepika Deepika - 1 month ago 6
CSS Question

display image on mousehover

I have a simple table in which there is 1 title and an drop down arrow image in the next column. I want that image to be hidden always and be shown only when the mouse is hovered over it. I tried using :hover attribute but its not displaying the result
My code is something like this.

Edit:

I have achieved the above with the help of opacity attribute. Now what I need to do is to show a dropdown with a link to a page on click of image. I am new to jquery, I have writtent the outline function but clueless as to what to write to display the dropdown with the link.

Here is the function:

<script>
$(document).ready(function(){

$("#ddImg").click(function(){
///

});

});
</script>


HTML

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<div class="Table">
<div class="Row" >
<div class="Cell">
<p>Dummy Title</p>
</div>
<div id="divImg" class="Cell" >
<img class="image" id= "ddImg" src="images/MENUDARK.gif" />
</div>
</div>
</div>


CSS

<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}

.image
{
opacity: 0;
}

.cell:hover .image
{
opacity: 1;
}
</style>

Answer

Please check the below code:

DEMO

HTML

<div class="Table">
    <div class="Row" >
        <div class="Cell">
            <p>Dummy Title</p>

        </div>
        <div class="cell">
            text here
            <img src="http://img.b8cdn.com/images/templates/bayt/4.0/bayt-logo-new-en.png" class="image"/>
        </div>
    </div>

</div>

CSS

.image {
    opacity: 0;
}

.cell:hover .image {
    opacity: 1;
}