2

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

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 的帮助！

问题解决了 ！伙计们，你的速度很快，谢谢！

4

5 回答 5

2 
$("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");  
        }
 );
于 2013-05-31T08:02:44.440 回答
1

你可以简单地这样做：

$("div.thumbnail").hover(function () {
    $(this).find(".btn").toggle();
});
  • toggle将简单地显示/隐藏 btn 元素，因为您将鼠标悬停在里面和外面。
  • $(this)将确保您能够在当前范围内找到按钮。
于 2013-05-31T08:05:16.340 回答
1

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

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

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

于 2013-05-31T08:05:04.560 回答
1

你的代码一切都很好。问题是您获取了要显示的元素的 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;
}
于 2013-05-31T08:03:16.270 回答
0

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

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

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

于 2013-05-31T08:07:31.310 回答