如何在图像悬停时显示 div 或按钮？

Question

如何在图像悬停时显示 div 或按钮？仅适用于悬停的图像。

<div class='post_body'>
    <div class='post entry-content '>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>    
<button>
 Test
</button>   
    </div>
</div>

在图片上显示按钮：右上角

图片名称可以随意。

需要 IPB 3.4.9

Answer 1

更新

如果你只想要一个按钮，那么没有 javascript/jquery 的帮助是行不通的。

我更新了my fiddle，以便满足您的需求。 在悬停时，我们需要获取悬停元素的位置并将其应用于绝对定位按钮。

$(document).ready(function(){
	$("#buttonChange").hide();
})

$(".bbc_img").hover(function(){
	// this is the mouseenter event
  var position = $(this).position(); // this is the hovered Image element
  
  $("#buttonChange").css("top", position.top);
  $("#buttonChange").css("left", position.left);
  $("#buttonChange").show();
}, function(){
	// this is the mouseleave event
	$("#buttonChange").hide();
});

span.lightbox{
  display: inline-block;
  margin: 20px;
}

button#buttonChange{
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='post_body'>
    <div class='post entry-content '>
     <button id="buttonChange" value="MyButton">
            Hi! Click me!
            </button>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x250">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x450">
        </span>     
    </div>  
</div>

希望这就是您要在这里完成的工作。

Answer 2

 <!-- Just need to add style to every button as follows-->
<div class='post_body'>
<div class='post entry-content '>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
        <button style="position: absolute; margin-left: 296px; top: 12px;">
        Test 1
        </button>
    </span>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
         <button style="position: absolute;margin-left: 296px;top: 164px;">
        Test 2
        </button>
    </span>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
         <button style="position: absolute;margin-left:296px;top: 318px;">
        Test 3
        </button>
      </span>     
   </div>  
 </div>

Answer 3

$(".bbc_img").hover(function () {
    $('#ButtonChange').show();
}, function () {
    $('#ButtonChange').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='post_body'>
    <div class='post entry-content '>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>    
<input type="button" id="ButtonChange" value="My Button" /> 
    </div>
</div>

但只需要在悬停的图像中显示按钮（上、右）。