在悬停 div 上，在该 div 中显示按钮？答案

【问题标题】：On hover div, show button near that div?在悬停 div 上，在该 div 中显示按钮？
【发布时间】：2013-05-31 16:35:06
【问题描述】：

所以我有一个小用户画廊，我希望当用户进入他的画廊时，当他悬停图像时看到一个删除按钮。我尝试了很多东西，但都没有成功。

while($rowUser = mysql_fetch_array($queryuserGallery)){
        $display_fullsize_image[] = '
        <li  class="span3" style="width:130px;" >
            <div  class="thumbnail" style="border: none; box-shadow:none; height:200px; "> 
                <a  href="userimages/fullsize/'.$rowUser['fullsize_name'].' " rel="prettyPhoto" title="This is the description">
                <img  src="userimages/thumb/'.$rowUser['thumb_name'].'"  class="img-polaroid"  class="hoverme" alt="This is the title" /></a>
                        <p><a href="#" id="deletebuttonusergallery" class="btn btn-mini btn-danger">Detele</a>  </p> 
            </div>
        </li>
                        ';
    }

还有 jquery

$("div.thumbnail").hover(
         function(){
            var selected = $(".btn").attr("id");
            $(selected).css("display", "block"); 
        },
        function(){

            $(selected).css("display", "none");  
        }
 );

所以我选择了按钮的id，因为我将使用唯一的编号，并且我希望删除按钮只出现在悬停的div 上。有什么解决办法吗？以及 tnx 的帮助！

问题解决了！伙计们，你们快如闪电，谢谢！

【问题讨论】：

标签： jquery css hover

【解决方案1】：

$("div.thumbnail").hover(
        function() {
            var selected = "#"+$(this).find(".btn").attr("id");
            $(selected).css("display", "block"); 
        },
        function(){
            var selected = "#"+$(this).find(".btn").attr("id");
            $(selected).css("display", "none");  
        }
 );

【讨论】：

【解决方案2】：

您的代码几乎一切正常。问题是您获取了要显示的元素的 ID，但没有将主题标签添加到选择器中，这是一个应该可以使用的更新版本：

$("div.thumbnail").hover(
         function(){
            $(this).find(".btn").show(); 
        },
        function(){
            $(this).find(".btn").hide();  
        }
 );

或者在 CSS 中：

.thumbnail > .btn{
display:none;
}
/*Hover will not work in IE6, it only accepts hovers on links.*/
.thumbnail:hover > .btn{
display:block;
}

【讨论】：

【解决方案3】：

您不需要使用 ID。你可以只使用 jQuery 选择器：-

$("div.thumbnail").hover(
        function() {
            $(this).find(".btn").show(); 
        },
        function(){
            $(this).find(".btn").hide();  
        }
 );

此外，您可以使用 jQuery 的隐藏和显示方法，而不是设置 CSS 显示属性。

【讨论】：

【解决方案4】：

你可以这样做：

$("div.thumbnail").hover(function () {
    $(this).find(".btn").toggle();
});

toggle 将简单地显示/隐藏 btn 元素，因为您将鼠标悬停在里面和外面。
$(this) 将确保您能够在当前范围内找到该按钮。

【讨论】：

toggle 的问题是，如果你两次输入元素而没有第一次退出...那么反应就会发生变化。（尝试在元素上使用 alt 选项卡并返回页面或在 DOM 完全加载之前将鼠标悬停在元素上）

【解决方案5】：

或者你可以像这样使用 mouseenter 和 mouseleave：

$("#mainImage").mouseenter(function(){
    $("#deleteBtn").show();
}).mouseleave(function(){
    $("#deleteBtn").hide();
});

工作示例：http://jsfiddle.net/dpxvk/1/

【讨论】：