0

我正在尝试编写一个代码，当将鼠标悬停在封装在内部的标题上时会显示一个链接图标

我所做的是，我有一个 CSS 类samplea。<a>有很多class='samplea'。然后我插入 jQuery 以在<a>. 我最初隐藏了图像。然后添加 jQuery，以便在将鼠标悬停在标题上时显示/隐藏。

然而，我毕竟能够插入图像，<a class='samplea'>但不能隐藏/显示它们。

HTML

<h3><a class="samplea"  id="aid">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>

CSS

.samplea {  
    }

JS

 $(document).ready(function () {
        var permalinkid = 1;
        $(".samplea").each(function (index) {
            $(this).after("&nbsp;&nbsp;<img src='http://www.spotzerblog.com/wp-content/themes/StandardTheme_261/images/icn_permalink.png' id='permalink" + permalinkid + "' />");
            //if you comment below line it will show the link icons 
            //appropriately
            $("#permalink" + permalinkid).hide();                
            $(this).hover(
                   function () { $("#permalink" + permalinkid).show(); },
                   function () { $("#permalink" + permalinkid).hide(); }
            );
            permalinkid = permalinkid + 1;               
        });
    });

为什么会这样？这是相应的JSFiddle。

4

2 回答 2

3

尝试这个：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('mouseenter mouseleave', 'h3', function () {
    $(this).find('img').toggle();
});

小提琴演示

于 2013-06-24T10:31:56.703 回答
0

您permalinkid = permalinkid + 1在每次迭代中都在递增，但是只有当您进行“悬停”时才会对其进行评估，这将使其成为permalink4 http://jsfiddle.net/balintbako/G3Psm/5/ Palash Mondal 的答案基本上解决了您的问题，但是如果你想保持它基于 ID，然后检查这个：http: //jsfiddle.net/balintbako/G3Psm/9/

$(document).ready(function () {
    var permalinkid = 1;
    $(".samplea").each(function (index) {
        var temp = permalinkid;
        $(this).after($("<div id='permalink" + temp + "'>text</div>"));
        //if you comment below line it will show link icon
        //appropriately        
        $("#permalink" + permalinkid).hide();
        $(this).hover(

        function () {
            $("#permalink" + temp).show();
        },

        function () {
            $("#permalink" + temp).hide();
        });
        permalinkid = permalinkid + 1;
    });
});
于 2013-06-24T10:38:34.877 回答