Javascript 悬停时弹出HTML图像_Javascript_Jquery_Html_Css

Javascript 悬停时弹出HTML图像

javascript jquery html css

Javascript 悬停时弹出HTML图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望这些图像在我将其悬停在文本上时可见。但根据这一点，它可以工作，但它只选择第一个，因为每个图像都有相同的id。是否有人知道如何解决此问题。请提前感谢。新的网页开发。所以请详细解释。谢谢 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Default func

我希望这些图像在我将其悬停在文本上时可见。但根据这一点，它可以工作，但它只选择第一个，因为每个图像都有相同的id。是否有人知道如何解决此问题。请提前感谢。新的网页开发。所以请详细解释。谢谢

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Selectable - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

        <script type = "text/javascript" src = "js/jquery.js"></script>
        <script type = "text/javascript" src = "js/jquery_ui.js"></script>

        <link rel="stylesheet" href="/resources/demos/style.css">

        <style>
            #feedback { font-size: 1.4em; }
            #selectable .ui-selecting { background: #FECA40; }
            #selectable .ui-selected { background: #F39814; color: white; }
            #selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; }
            #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

            img
            {
                position:absolute;
                left:250px;
                display:none;
            }
        </style>

        <script>        
            $(function() {
                $( "#selectable" ).selectable();
            });
        </script>
    </head>

    <body>

        <table id="myTable">
            <td>
                <tr>
                    <ol id="selectable" onmouseover="show(next,true)" onmouseout="show(next,false)">
                        <li>Item 1 <img src="next.jpg" id="next1"></li>
                        <li>Item 2 <img src="next.jpg" id="next2"></li>
                        <li>Item 3 <img src="next.jpg" id="next3"></li>
                        <li>Item 4 <img src="next.jpg" id="next4"></li>
                        <li>Item 5 <img src="next.jpg" id="next5"></li>
                    </ol>
                </tr>
            </td>
        </table>

        <script type = "text/javascript"> 
            $(document).ready(function() {
                $('#selectable').fadeIn('very slow');
            });
        </script>

        <script language="javascript">
        //function to display the immage
            function show(id,disp) {
                if (disp == true) {
                    id.style.display = "block";
                }

                if (disp == false) {
                    id.style.display = "none";
                }
            }
        </script>
    </body>
</html>


jQuery UI可选-默认功能
#反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：20%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
img
{
位置：绝对位置；
左：250px；
显示：无；
}
$（函数（）{
$（“#可选”）.selective（）；
});
项目1
项目2
项目3
项目4
项目5
$（文档）.ready（函数（）{
$（'可选'）.fadeIn（'非常慢'）；
});
//函数来显示图像
功能显示（id、disp）{
如果（disp==true）{
id.style.display=“块”；
}
如果（disp==false）{
id.style.display=“无”；
}
}

你可以试试这个

如果你不需要任何淡入效果，使用CSS

#可选li:hover img{display:block；}

如果确实需要效果，请使用以下方法：

$("#selectable li" ).hover(
    function() {
       $(this).find("img").fadeIn(1000);
    }, function() {
       $(this).find("img").fadeOut(1000);
    }
);

您实际上不需要可选插件来完成此操作-您可以使用

函数的意思是，如果您将鼠标悬停在#selective中的li元素上，它将显示出来，然后当您离开该元素时，它将执行相反的操作

html代码：

<a href="#">some text here..<img src="image url" /></a>

在我看来，您应该改用CSS:

li:hover-img{display:block；}

。根本不需要使用JavaScript。听起来很棒。非常感谢您的回复。我试试这个

$(document).ready(function() {
    $('#selectable li').hover(function(){
        $(this).find('img').toggle();
    });
});

<a href="#">some text here..<img src="image url" /></a>

a img { display:none; }
a:hover img { display:block; }