Question

目标是在鼠标悬停时显示动画，在mouseout上消失。在WordPress中使用jQuery，因此是无冲突标签。

什么有效？ FadeTo悬停并添加/删除其他类。这是基于每个项目发生的。

什么不是？我已经准确地将新图像预先悬停在悬停上，但是悬停在任何img.read上都会触发所有.entry-content div。我已经尝试遍历DOM以找到父母（我无法完成工作）＆amp;我尝试过使用$( $img ).prependTo( $(this) );也失败了。

我很感激帮助 a）仅针对悬停的div（主要需求），以及 b）为新JS人员整理工作的建议。

    /*
    * Readmore animation
     */
    jQuery(document).ready(function($) {

    //add readmore class to images (temp, will eventually live in markup)
    $(".post-image").addClass("readmore");

    //fade original image on hover
    $("img.readmore").hover(
        function() {
            $(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
    }, function () {
            $(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
    }
);

//prepend new image on hover

    //what's our img?
    var $img = $("<img src='/path/to/readmore_hover.png' style='position: absolute; left: 15%;opacity:0.7 !important' />");

    //prepend new image on hover
    $("img.readmore").hover(
        function() {
            $( $img ).prependTo( ".entry-content" );
        }),
     function () {
    //      remove img on mouseout;
    }
});

Answer 1

此$( $img ).prependTo( ".entry-content" );发生错误。选择器.entry-content将选择所有条目。您应该指定所需的目标条目。 $this目前是您正在悬停的readmore项。因此，您必须找出一个选择器来识别目标条目项。

http://jsfiddle.net/93TCZ/

Answer 2

这会使图像 prependTo 相应的 div 。

$( $img ).prependTo( $(this).closest(".entry-content") );

我还在处理 remove（）功能。

修改

我非常喜欢Leglaws id 选择器来删除图片，所以这里已经完成了！

<html>

<script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function () {
    //add readmore class to images (temp, will eventually live in markup)
    $(".post-image").addClass("readmore");

    //fade original image on hover
    $("img.readmore").hover(
        function() {
            $(this).stop();
            $(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
        }, function () {
            $(this).stop();
            $(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
        }
    );

//prepend new image on hover

    //what's our img?
    var $img = $("<img id='inserted' src='/path/to/readmore_hover.png'" + 
        "style='position: absolute; left: 15%;opacity:0.7 !important' />");

    //prepend new image on hover
    $("img.readmore").hover(
        function() {
            $( $img ).prependTo( $(this).closest(".entry-content") );
        },
        function () {
            //      remove img on mouseout;
            $('#inserted').remove();
        })

});
</script>

<body>
<div class="entry-content">
    <a href="http://google.com"><img class="readmore"
        style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
    <a href="http://yahoo.com"><img class="readmore"
        style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
    <a href="http://stackoverflow.com"><img class="readmore"
        style="z-index:2;" src="some_image.png" /></a>
</div>
</body>
</html>

将此图片添加到此处。

//在悬停功能上添加新图片时也出现错误。第一个函数的右括号} 紧随其后有右括号）。它应该在第二个功能的末尾（删除图像）。

您调用的闪烁实际上是在您移除鼠标悬停时不会告诉您使用 fadeTo（）函数启动的动画停止的结果。因此，每次将鼠标悬停在动画上时，您正在排队动画。只需将鼠标放在图像上几次并松开鼠标即可轻松检查。您实际上会看到它通过您放入队列的每个动画。 stop（）只是jQuery的动画片之一。

对于显示和消失的原始图像，您需要将样式设置为 z-index = 2; 。这样可以将淡化图像保留在新img前面，这样您仍然可以执行下面评论中提到的点击。

现在我真的相信这是完整的。哈哈

真棒！

c0p

Answer 3

为插入的图像添加id，以便在删除时易于引用。然后以某种方式添加图像，如：

$("img.readmore").hover(
  function() {
    $( $img ).prependTo($(this));
  },
  function () {
    $("img#inserted").remove();
  }
);

jQuery - 在悬停时将图像添加到父div

3 个答案:

修改