Question

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

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用于帮助！

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

Answer 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");  
        }
 );

Answer 2

使用您的代码，一切都很好。问题是你获取要显示的元素的ID，但是你没有将hashtag添加到选择器，这是一个应该有效的更新版本：

$("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;
}

Answer 3

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

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

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

Answer 4

你可以这样做：

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

toggle将只显示/隐藏btn元素。
$(this)将确保您能够在当前范围内找到该按钮。

Answer 5

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

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

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

在悬停div上，显示该div附近的按钮？

5 个答案: