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

Posted 2023-03-06

【中文标题】如何在图像悬停时显示 div 或按钮？

【英文标题】：How to show div or button on image hover?

【发布时间】：2018-08-15 08:55:03

【问题描述】：

仅适用于悬停的图像。

<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

【问题讨论】：

您希望在悬停时显示哪些按钮？

Display <div> or <span> over image on :hover的可能重复

【参考方案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>

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

【参考方案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>

【讨论】：

您应该将.lightbox 设置为相对定位的元素，这样您就可以在这些容器中应用absolute 位置，而不是整个页面。

【参考方案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>

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

【讨论】：

您应该编辑过您的帖子。但为了清楚起见，您需要 一个 按钮来改变位置还是多个？

在小提琴工作中，但在我的 html 中不起作用。我找到了解决方案，这个解决方案在我的 html 中工作，但需要修改才能完成。这里小提琴jsfiddle.net/Qartvela/f9zv1jL7/7 1）需要在图像的右上角显示“点击我”。 2) 类 alt-wrap 以全宽而不是宽度相同的插入图像工作。感谢您的帮助和关注。

类 .alt-wrap 以全宽工作，而不是宽度相同的 .bbc_image

将display: inline-block 添加到.alt-wrap 类，并从.alt-wrap a.MyShare 类中删除除top: 0 和left: 0 之外的所有位置属性。最后但同样重要的是，将display: block 添加到.lightbox。应该这样做。