Question

我有图像和翻转图像。使用jQuery或CSS，我想在父div（包含图像）上发生onmousemove / onmouseout事件时显示/隐藏翻转图像。

我该怎么做？

编辑：HTML请求下方发布。与问题无关，但由于FYI HTML建立在30列流体网格上。

在悬停顶部div（行 - 流体）时，image（image.png）应更改为不同的源图像（imagehover.png）。

<div class="row-fluid" style="padding-top:1em">
            <div class="span4">
              //Random content
            </div>
            <div class="span8 offset1">
              //Random content
            </div>
            <div class="span9 offset3">
              <ul>
                <li>//Random content</li>
                <li>//Random content</li>
                <li>//Random content</li>
             </ul>
            </div>
            <img src='../../images/image.png>
<div>

Answer 1

您想要执行以下操作：full_path_to_css parent:hover child

full_path_to_css parent:hover child {
  styles for your item
}

例如：

html（div.img可以是任何东西）：

<div class="parent">
  <div class="img">
  </div>
</div>

的CSS：

div.parent {
  width:200px;
  height:200px;
  background-color:red;
}
div.img {
  width:100px;
  height:100px;
  background-color:blue;
}

div.parent:hover div.img {
  background-color:green;
}

如果你想在这里测试一下：http://jsfiddle.net/NicosKaralis/kd6wy/

要记住，div和img类可以是任何元素，不需要div，你可以随意更改css样式，唯一的事情你需要注意的是parent:hover child

修改

只是为了澄清一件事：:hover的项目是你要检测悬停行为的女巫的父项，而child是你想要改变css规则的女巫项目< / p>
再次编辑

<div id="parent" class="row-fluid" style="padding-top:1em"> <div class="span4"> //Random content </div> <div class="span8 offset1"> //Random content </div> <div class="span9 offset3"> <ul> <li>//Random content</li> <li>//Random content</li> <li>//Random content</li> </ul> </div> <img class="child" src='../../images/image.png> <div>

您需要的代码：

div#parent.row-fluid img.child { display:none; } div#parent.row-fluid:hover img.child { display:block; }

如果鼠标悬停在div上，这将使您的图像显示

Answer 2

就像将mouseover和mouseout事件处理程序附加到父div然后操纵包含的img元素一样简单。

var rolloverImage = ...
var origImage = ...
$("#parentDivId")
       .mouseover(function() {
          $("#parentDivId img").attr("src", rolloverImage)
       })
       .mouseout(function() {
          $("#parentDivId img").attr("src", origImage)
       })

Answer 3

没有任何html可以测试，这只是我想到的东西。不确定它是否会起作用，但我不明白为什么它不会。

$('div').mouseenter(function() {
    var image = $('img', this);

    $(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
    var image = $('img', this);

    $(image).attr('src', 'old-image-src.jpg');
});

Answer 4

尝试：

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
    $(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});

<强> jsFiddle example

Answer 5

您可以使用此代码“显示/隐藏翻转图像”

#parentDiv > img {
  display: none;
}
#parentDiv:hover > img {
  display: block;
}

>允许您选择img作为#parentDiv的直接后代的标记（我给了外部div这个ID）。然后我们只是在常规和悬停状态下为它设置不同的风格。

Answer 6

回答我自己的问题，因为我使用其他人的评论和答案的元素来创建混合：精灵，完全CSS解决方案。我发现这是最佳的。

Per @ gilly3“图像交换最好用精灵完成，这样图像之间就不会有任何延迟切换。将图像的两个版本并排放在一个文件中。将该图像设置为背景一个div，并调整背景位置以显示一个或另一个图像。“对于这个例子，我将使用96px（高度）乘27px（宽度）精灵，使用我的em值。

在HTML中将img替换为：

<div class="sprite-image"></div>

CSS：

.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}

.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}

在父div元素的鼠标悬停时更改图像源

6 个答案: