jquery - 将按钮放置在图像悬停上

Question

我知道我会得到很多具有相似名称的解决方案。但我的问题是 - 我的代码正在离线工作。但我把它放在网上......它在图像悬停时没有显示任何按钮。这是代码.. code

2-问题-我想删除中间表演类的外部图像。当我的鼠标位于按钮位置时，它会删除该类...谢谢

我很高兴用 css 替换我的 jquery...但不想更改 html..

img:hover{
opacity:0.5;
background-color:#000;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.middleShow {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<div id='container'>
<div class="row">
        <div class="col-lg-4" align="left"><img src="https://seedroid.com/img/post/icons/128/csdevbin.arham.naturelivewallpaper.jpg" alt="Custom photo wall art of a white perspex box frame of a couple on the beach with a red scarf" width="100%">
        <div class="middle">
         <div class="text">Close Look</div>
        </div>
      
		<h2><a href="/acrylic-box/">Any Text</a></h2>
    <p class="LeeFont">Gbvdcgfn vhgd ghguj gfhjg bn .</p></div>
    </div>      
</div>

Answer 1

问题并不是按钮不显示，而是按钮确实显示(或者如果过渡属性不同则可以)，但目前，由于不透明度为 0，按钮似乎不显示，并且 。 6 秒的时间不足以让用户移动到按钮并单击它。您可以对代码进行细微调整，将 duration/delay的过渡时间来纠正这个问题。

$(document).ready(function() {
    $("img").hover(function() {
        $(this).siblings("div.middle").addClass("middleShow");
    }, function() {
        $(this).siblings("div.middle").removeClass("middleShow");
    });
});

img:hover {
  opacity: 0.5;
  background-color: #000;
}

.middle {
  transition: opacity .6s ease 1.5s;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.middleShow {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div class="row">
    <div class="col-lg-4" align="left"><img src="https://seedroid.com/img/post/icons/128/csdevbin.arham.naturelivewallpaper.jpg" alt="Custom photo wall art of a white perspex box frame of a couple on the beach with a red scarf" width="100%">
      <div class="middle">
        <div class="text">Close Look</div>
      </div>

      <h2><a href="/acrylic-box/">Any Text</a></h2>
      <p class="LeeFont">Gbvdcgfn vhgd ghguj gfhjg bn .</p>
    </div>
  </div>
</div>

上面的代码将在 0.6 秒后缓入并在屏幕上停留 1.5 秒。根据您的需要进行调整。