Question

当鼠标悬停在图像上时，我希望图像稍微变暗（叠加？）。然后，图片中的按钮应该在悬停时出现，然后如果鼠标悬停在一个按钮上，它应该变成红色（就像图片一样），图像描述文本应该出现在按钮下面（如图片所示），然后如果单击一个按钮，它应该将我们带到一个新的URL（比如说，如果单击该按钮，它将我们带到www.google.com），任何人都可以提供任何代码吗？我不知道该怎么做。

Answer 1

我认为这就是你想要的。这个。我只关心你的主要观点。这对你有用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div.contain{
  width: 1000px;
  height: 667px;
  border: 2px solid black;
  margin: 100px;
  margin-top: 10px;
  background-image: url(https://dancingaspen.files.wordpress.com/2015/09/coffee-shop-mug.jpg);
}

div.mask{
  width: 100%;
  height: 100%;
  background-color: black;
  position:relative;
  opacity: 0;

}

.zoom{
  width: 150px;
  height: 50px;
  color: white;
  font-size: 35px;
  background-color: red;
  position: absolute;
  top: 300px;
  left: 300px;
  border: 2px solid white;
  border-radius: 10px;
  display: none;
  text-align: center;
  font-size: monospace;
  padding-top: 15px;
  text-decoration: none;
}

.description{
 
  position: absolute;
  width: 70%;
  height: 30%;
  top:410px;
  left: 12%;
  font-size: 35px;
  color: white;
  font-family: zapfino;
  text-align: center;
  display: none;
}


</style>
<body>

<div class="contain">
 <div class="mask"></div>
    <a href="#" target="_blank" class="zoom">ZOOM</a>
    <div class="description">your description here</div>
</div>

 <script type="text/javascript">
   $(document).ready(function(){
    $(".contain").mouseenter(function(){
      $(".mask").animate({opacity:0.5},1000);
      $(".zoom").fadeIn(1500);
      $(".description").fadeIn(1500);
    });

     $(".contain").mouseleave(function(){
      $(".mask").animate({opacity:0},1000);
       $(".zoom").fadeOut();
      $(".description").fadeOut();
    });
   });
 </script>

</body>
</html>

只需复制，粘贴和运行。

Answer 2

使用＆＃39; hover＆＃39;可以使用直接css完成变暗的图像。设置。选择你的图片（或者最好是包含图片的div）并设置div：将鼠标悬停在较低的不透明度上，例如不透明度：0.5;

如果您想在没有深色背景的情况下使图像变暗，可以将图像设置为div的背景

<parent div>
   <child div>

.parent {background: 'images/image.jpg';}
  .child {background-color: black; opacity:0;}
  .child:hover {opacity:0.7;}

在鼠标悬停上的图片上插入按钮，图像变暗

2 个答案: