Question

我正在完成以下任务，但无法做到。

如果我在div.selected中有笑脸.png

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

然后在div.selected-icon上悬停显示div.show-hover否则显示无

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

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

任何帮助??

Answer 1

试试这个

<强>的jQuery

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

HTML代码

 <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>

请参阅DEMO

Answer 2

所以你想在悬停时显示一个兄弟姐妹？

Working demo

.show-hover {
    display: none;
}

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

Answer 3

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();
    });   

});

或幻灯片效果的其他js

$(document).ready(function(){

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

});

DEMO

Answer 4

您可以使用onmouseover和onmouseout通过javascript更改要显示/隐藏的元素的显示css值。

<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>

如果任何特定div具有特定图像，如何显示任何div

4 个答案: