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，按钮似乎不显示，并且。 6s不够长，用户无法移动到该按钮并单击它。您可以在过渡的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秒。视需要进行调整。

将按钮放在图像悬停上

1 个答案: