Question

当我将这些图像悬停在文本上时，我希望这些图像可见。但根据它可行，但它只选择第一个，因为每个图像都有相同的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>

Answer 1

html代码：

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

css代码：

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

Answer 2

$("#selectable li").mouseover(function(){
    $(this).next().show();
});

$("#selectable li").mouseout(function(){
    $(this).next().hide();
});

你可以试试这个

Answer 3

如果您不需要任何淡入效果，请使用CSS #selectable li:hover img { display: block; }

如果确实需要效果，请使用：

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

Answer 4

您实际上并不需要Selectable插件来执行此操作 - 您可以使用jQuery hover function执行此操作。

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

该函数表示，如果将鼠标悬停在#selectable中的li元素上，它将显示，然后当您离开该元素时将执行相反的操作。

Fiddle for reference

悬停时弹出HTML图像

4 个答案: