在鼠标悬停时在图片上插入按钮并且图像变暗

Question

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

Answer 1

我想这就是你want.try这个。我只关心你的主要 points.hope 这对你有用。

<!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

可以使用 'hover' 设置直接 css 使图像变暗。 select 您的图片（或者最好是包含图片的 div）并将 div:hover 设置为较低的不透明度，例如 opacity:0.5;

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

<parent div>
   <child div>

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

在鼠标悬停时在图片上插入按钮并且图像变暗

Insert buttons on a picture on mouse hover and image darken

html

css

jquery

hover