Question

我有一个大的div，里面有一个小图像。当我将鼠标悬停在div上时，我想让图像褪色，即使鼠标没有直接在图像上方。

div比图像大得多，所以我不会在图像周围添加透明度或更改图像大小或类似的东西。

当鼠标悬停在div上时，我只是想让它褪色。

这是我到目前为止的代码，但它没用：

<div id="left">
    <img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>

CSS

#left {
    background-color: #f0f0ee;
    float: left;
    width: 50%;
    min-height: 100%;
}

#logoLeft {
    float: right;
    margin-top: 2.5em;
}

Answer 1

我建议：

#left:hover #logoLeft {
    opacity: 0.4;
}

如果你想逐渐消退：

#logoLeft {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#left:hover #logoLeft {
    opacity: 0.4;
    transition: opacity 0.3s ease-in-out;
}

Answer 2

如果image.jpg是常规图像，则下面的代码可以使用，faded.jpg包含了一个褪色版本的image.jpg，你可以使用它。

<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">

Answer 3

您可以通过以下两种方式之一完成此任务。

使用常规子选择器：#left:hover #logoLeft，只需说明身份为#left:hover #left的孩子，就应该应用这些规则。
使用直接后代选择器#left:hover > #logoLeft表示任何#left:hover身份#left的直接孩子都应该应用这些规则。

以下是Mozilla的更详细说明：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

此外，:hover sudo选择器是用于鼠标悬停属性的选择器。 MDN文章：https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

注意：某些较旧（过时）的Internet Explorer版本仅支持锚标记上的:hover sudo选择器。

对于褪色，我猜你只想改变图像的不透明度。要获得完整的跨浏览器支持，我建议您使用此页面：http://css-tricks.com/snippets/css/cross-browser-opacity/

其中说明如下：

.transparent_class {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* Netscape */
    -moz-opacity: 0.5;

    /* Safari 1.x */
    -khtml-opacity: 0.5;

    /* Good browsers */
    opacity: 0.5;
}

这是一个有效的jsfiddle

Answer 4

以下是Jquery解决方案： Css部分：

  #left{
   background-color: #f0f0ee;
   float: left;
   border:1px solid black;
    width: 50%;
    min-height: 100%;
  }

#logoLeft {
 float:right;  
 }
.fadeOut{
 opacity:0;
 transition: opacity 1s ease-in-out;
 }

Js Part：

<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
 $("#logoLeft").removeClass("fadeOut");
}
 });
});
</script>

HtML部分：

<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>

以下是工作示例：http://jsbin.com/tijobudo/1/edit

当你将鼠标悬停在div上时，如何淡化图像？

4 个答案: