1

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

我该怎么做？

编辑：应要求在下面发布的 HTML。与问题无关，但作为仅供参考的 HTML 是建立在 30 列流体网格上的。

在顶部 div (row-fluid) 悬停时，图像 (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>
4

6 回答 6

9

你想做这样的事情：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/

请记住，divwithimg类可以是任何元素，不需要是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 上时显示

于 2012-07-17T20:34:28.613 回答
2

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

var rolloverImage = ...
var origImage = ...
$("#parentDivId")
       .mouseover(function() {
          $("#parentDivId img").attr("src", rolloverImage)
       })
       .mouseout(function() {
          $("#parentDivId img").attr("src", origImage)
       })
于 2012-07-17T20:39:14.733 回答
1

没有任何要测试的 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');
});
于 2012-07-17T20:34:43.350 回答
1

尝试：

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

于 2012-07-17T20:34:50.800 回答
0

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

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

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

于 2012-07-17T20:36:59.577 回答
0

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

每@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;
}
于 2012-07-17T23:34:51.533 回答