CODEWITHSUNDEEP
javascripthtmlcss
Atif Azad
Atif Azad

Reputation: 737

How to show any div if any specific div have specific image

i am working on below task but cant do it.

if i have smiley.png in div.selected

   <div class="selected" style=""><img width="25" height="24"  src="images/smileys/smiley.png" icon-value="1" icon-index="0"></div>

then on hover of div.selected-icon show the div.show-hover otherwise display it none

 <div class="selected-icon" style=""><img width="25" height="24" src="images/smileys/smiley.png"></div>

 <div class="show-hover">xyz</div>

any help??

Upvotes: 0

Views: 126

Answers (4)

4dgaurav
4dgaurav

Reputation: 11496

HTML

<div id="flip">Hover to show the panel</div>
<div id="panel">Hello world!</div>

CSS

#panel, #flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}

JS

$(document).ready(function(){

    $("#flip").mouseover(function(){
        $("#panel").show();
    });

    $("#flip").mouseout(function(){
        $("#panel").hide();
    });   

});

or another js for slide effect

$(document).ready(function(){

    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });

});

DEMO

Upvotes: 2

JRulle
JRulle

Reputation: 7568

you can use onmouseover and onmouseout to change the display css value via javascript of the elements you want to show/hide. 

<div class="selected" style="" onmouseover="javascript:document.getElementById('selected-icon').style.display = 'block'; document.getElementById('show-hover').style.display = 'block';" onmouseout="javascript:document.getElementById('selected-icon').style.display = 'none'; document.getElementById('show-hover').style.display = 'none';"><img width="25" height="24"  src="images/smileys/smiley.png" icon-value="1" icon-index="0"></div>

<div class="selected-icon" id="selected-icon" style="display: none;"><img width="25" height="24" src="images/smileys/smiley.png"></div>

<div class="show-hover" id="show-hover" style="display: none;">xyz</div>

Upvotes: 1

Boopathi Rajan
Boopathi Rajan

Reputation: 1210

try this

jQuery

$('.selected-icon').mouseover(function()
{
    $('.show-hover').show();
});
$('.selected-icon').mouseout(function()
{
    $('.show-hover').hide();
});

HTML code

 <div class="selected-icon" style=""><img width="25" height="24" src="images/smileys/smiley.png"></div>

 <div class="show-hover" style="display:none">xyz</div>

see DEMO

Upvotes: 3

Turnip
Turnip

Reputation: 36682

So you want to show a sibling on hover?

Working demo

.show-hover {
    display: none;
}

.selected-icon:hover + .show-hover {
    display: block;
}

Upvotes: 3

Related Questions