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

Question

目标是让动画在鼠标悬停时出现，而在鼠标悬停时消失。 在WordPress中使用jQuery，因此没有冲突标签。

什么有效？ 将FadeTo悬停并添加/删除附加类。 这是逐项进行的。

没什么 我已经将新图像准确地悬停在前面，但是悬停在任何img.readmore上都会在所有.entry-content div上触发。 我尝试遍历DOM来找到父对象（我无法正常工作），并尝试使用$( $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" );发生错误$( $img ).prependTo( ".entry-content" ); 。 选择器.entry-content将选择所有条目。 您应该指定所需的目标条目。 $this当前是您要悬停的readmore项。 因此，您必须找出一个选择器来标识目标输入项。

http://jsfiddle.net/93TCZ/

Answer 2

这将使图像前置到适当的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的前面，因此您仍然可以进行下面的评论中提到的点击。

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

太棒了！

0

Answer 3

为插入的图像指定一个ID，以便在删除时易于参考。 然后以某种方式在图像前添加：

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

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

问题描述

3 个解决方案

解决方案1
0 2014-05-22 03:10:18

解决方案2
0 已采纳 2014-05-22 03:29:04

编辑

解决方案3
0 2014-05-22 03:33:32

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

问题描述

3 个解决方案

解决方案1 0 2014-05-22 03:10:18

解决方案2 0 已采纳 2014-05-22 03:29:04

编辑

解决方案3 0 2014-05-22 03:33:32

解决方案1
0 2014-05-22 03:10:18

解决方案2
0 已采纳 2014-05-22 03:29:04

解决方案3
0 2014-05-22 03:33:32