使用 jQuery 像 Stack Overflow 一样悬停的标签 [关闭]答案

【问题标题】：Tags hovering like Stack Overflow using jQuery [closed]使用 jQuery 像 Stack Overflow 一样悬停的标签 [关闭]
【发布时间】：2011-03-09 11:07:05
【问题描述】：

stackoverflow 如何对问题的标签产生悬停效果？如何使用 jquery 做同样的事情？

编辑：不是鼠标悬停，我希望子菜单显示Add Jquery to favorite tags

【问题讨论】：

只需要简单的 CSS 就可以完成，为什么需要 jQuery？
态度很好...
@Reigel 如果您仅在 CSS 上使用悬停标签，那么由于缺乏对悬停属性的功能支持，许多移动设备将无法访问它们。
Shripad 似乎已经回答了你的问题...如果它对你有用，别忘了将他的回答标记为已接受！
@Jaryl 如果移动设备是使用 javascript 来完成应该只使用 css 完成的事情的原因（在我看来），那么使用特定于移动设备的 css 会更有意义使用悬停。

标签： jquery tags mousehover

【解决方案1】：

这应该可以完成工作。

http://jsfiddle.net/5GD6r/4/

我几乎完全按照 stackoverflow 的方式对其进行了编码。我建立在 @Reigel 已经创建的按钮之上。

希望这会有所帮助。干杯:)

编辑：也应要求从 jsFiddle 添加了答案。

HTML：

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">Ruby-on-Rails</a>

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">JQuery</a>

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">CSS</a>


<div class="mouseoverHoverBox">
    <span class="pointer">
        <span class="plusminus">+</span>
        <span class="addRemove">Add </span>
        <span class="insert"></span>
        <span class="fromTo"> To </span>
        <span>Interesting tags</span>
    </span>
    <br />
    <span class="pointer">
        <span class="plusminus">+</span>
        <span class="addRemove">Add</span>
        <span class="insert"></span>
        <span class="fromTo"> To </span>
        <span>Ignored tags</span>
    </span>
</div>

CSS：

.post-tag {
    position:relative;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    color: #3E6D8E;
    font-size: 90%;
    line-height: 2.4;
    margin: 2px 0px 2px 0px;
    padding: 3px 4px;
    text-decoration: none;
    white-space: nowrap;
    }

.post-tag:hover {
    position:relative;
    background-color:#3E6D8E;
    color:#E0EAF1;
    border-bottom:1px solid #37607D;
    border-right:1px solid #37607D;
    text-decoration:none;
}

.mouseoverHoverBox {
    position:relative;
    top: -6px;
    border: 2px ridge #CCC;
    padding: 10px;
    width: 250px;
}

.plusminus {
    color: #E45C0E;
}

.pointer {
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #3E6D8E;
}

JAVASCRIPT：

$('.mouseoverHoverBox').hide();

$('.post-tag').live('mouseover',function(e){
    var x = $(this).offset();
    $('.mouseoverHoverBox').css('left',x.left-10);
    $('.insert').html(' <b>'+$(this).text() + '</b> ');
    $('.mouseoverHoverBox').slideDown();
});

$('.pointer').live('mouseover mouseout', function(e){
    if(e.type=="mouseover") {
        $(this).css('text-decoration','underline');
    }else if(e.type="mouseout") {
        $(this).css('text-decoration','none');
    }
});

$('.pointer').toggle(function() {
   $(this).find('.plusminus').text('x ');
   $(this).find('.addRemove').text('Remove ');
   $(this).find('.fromTo').text('From');
}, function() {
   $(this).find('.plusminus').text('+ ');
   $(this).find('.addRemove').text('Add ');
   $(this).find('.fromTo').text('To');
});

$('.mouseoverHoverBox').mouseleave(function(){
     $(this).hide();
});

【讨论】：

【解决方案2】：

我同意这两个，只是强调一下，你绝对可以在 CSS 中使用 :hover，如果你的目标浏览器比 IE6 更新，IE6 将无法使用 :hover 除非它是一个链接。

【讨论】：

【解决方案3】：

对于一个简单的悬停效果，你真的应该使用css，比如

a.hover:hover {
   background-color: #ff0000;
}

例如。

如果它必须在 jQuery 中，它看起来像

$('a.myanchorclass').hover(function(){
     $(this).css('background-color', '#ff0000');
}, function(){
     $(this).css('background-color', '#000000');
});

【讨论】：

我不明白为什么这被否决了，似乎是一个完全有效的解决方案？