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

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/

要记住,divwith imgclass可以是任何元素,不需要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上,这将使您的图像显示出来