当鼠标悬停在HTML/JS/JQUERY列表上时，图像弹出

Image pop when hover over a list in HTML/JS/JQUERY

本文关键字：图像 列表 JQUERY 悬停 鼠标 HTML JS      更新时间：2023-09-26

我希望这些图像是可见的，当我把它们悬停在文本。但根据这个，它工作，但它只选择第一个，因为每个图像都有相同的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="next"></li>
                        <li>Item 2 <img src="next.jpg" id="next"></li>
                        <li>Item 3 <img src="next.jpg" id="next"></li>
                        <li>Item 4 <img src="next.jpg" id="next"></li>
                        <li>Item 5 <img src="next.jpg" id="next"></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>

在使用ID进行处理时使用以下方法，使ID不同

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

元素的id不能相同。您可以使用相同的类，并在show函数中传递类名。

更新:在单个列表上设置mouseover和mouseout事件，而不是单独获取特定元素。

<ol id="selectable">
  <li>Item 1 <img src="next.jpg" class="next"  onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
    <li>Item 2 <img src="next.jpg" class="next"  onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
    <li>Item 3 <img src="next.jpg" class="next"  onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
    <li>Item 4 <img src="next.jpg" class="next"  onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
    <li>Item 5 <img src="next.jpg" class="next"  onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
</ol>

你的show函数:

function show(clickedObj,disp) {
    if (disp == true) {
        clickedObj.style.display = "block";
    }
    if (disp == false) {
        clickedObj.style.display = "none";
    }
}
相关文章：