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

Question

我有一个图像和滚动图像。使用jQuery或CSS，当onmousemove/ommouseout事件发生在父div（包含图像）上时，我想显示/隐藏滚动图像。

我该怎么做？

编辑：HTML张贴在下面的请求。与这个问题无关，但作为一个仅供参考的HTML是建立在一个30列的流体网格上的。

悬停顶部div（行流体）后，图像（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/

请记住，img类的div可以是任何元素，不需要是div，并且您可以根据自己的意愿更改css样式，唯一需要注意的是parent:hover child

编辑

只是澄清一件事：带有:hover的项目是您想要检测悬停操作的开关上的父项，而child是您想要更改css规则的开关上

再次编辑

<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

尝试：

$('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示例

Answer 4

在没有任何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 5

您可以使用此代码来"显示/隐藏滚动图像"

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

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

Answer 6

回答我自己的问题，因为我使用了他人评论和答案的元素来创建一个混合：一个精灵，完全CSS的解决方案。我觉得这是最优的。

Per@gilly3"图像交换最好用sprite来完成，这样图像之间就不会有任何延迟切换。将两个版本的图像并排放在一个文件中。将该图像设置为div的背景，并调整背景位置以显示一个或另一个图像。"在本例中，我将使用96像素（高）乘27像素（宽）的sprite，使用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;
}