Question

我想要3个图像，我想在悬停/鼠标悬停事件中使用颜色淡化效果。

这是我的代码，直到现在

＆＃13;

<html>
<head>
    <title>Choose Category</title>

    <link rel="stylesheet" type="text/css" href="aindex.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <img class="top" id="hover1" src="http://via.placeholder.com/350x150" align="left" width="33%" />
    <img class="top" id="hover2" src="http://via.placeholder.com/350x150" align="left" width="33%" />
    <img class="top" id="hover3" src="http://via.placeholder.com/350x150" align="left" width="33%" />
</body>
</html>

＆＃13;

Answer 1

您可以使用纯CSS解决方案。这个在悬停时淡化图像并显示为div设置的背景。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

div {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

img:hover {
  animation: fadeout .5s ease forwards;
}

@keyframes fadeout {
  to {
    opacity: 0;
  }
}

<div class="red"><img src="http://placehold.it/100/333333"></div>
<div class="blue"><img src="http://placehold.it/100/666666"></div>
<div class="green"><img src="http://placehold.it/100/000000"></div>

Answer 2

由于您要求提供jQuery解决方案，请转到：

＆＃13;

$(".wrap").hover(function() {
    $(this).children("span").fadeOut();
}, function() {
    $(this).children("span").fadeIn();
});

＆＃13;

.wrap {
    position: relative;
    width: 180px;
    height: 75px;
    cursor: pointer;
    background-color:blue;
}
.wrap span {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    background: url('https://www.w3schools.com/css/trolltunga.jpg');
    background-size:cover;
    z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap"><span></span>Hello</div>

＆＃13;

Answer 3

您可以在层叠样式表中使用不透明度。不透明度的值为0到1

hover1:hover {
    opacity: 0.2;}
hover2:hover {
    opacity: 0.2;}
 hover3:hover {
    opacity: 0.2;}

Answer 4

你需要指定一个像这样的JQuery函数，当你opacity在图像上时动态添加hover的css，并从图像中删除你的鼠标指针。

$(document).ready(function(){

    $(".top").on("mouseenter", function(){
        $(this).css('opacity','0.7');

    });

    $(".top").on("mouseleave", function(){
        $(this).css('opacity','1');
    });
});

为了您的工作和简单，这里添加了PLUNKR

的链接

在悬停/鼠标悬停jQuery上使图像淡化为一种颜色

4 个答案: