Wie wirkt sich stackoverflow auf einen Tag einer Frage aus? Wie mache ich dasselbe mit jquery?Tags, die wie Stack Overflow mit jQuery schweben
EDIT: Nicht, dass Mouseover i das Untermenü Add Jquery to favorite tags
Wie wirkt sich stackoverflow auf einen Tag einer Frage aus? Wie mache ich dasselbe mit jquery?Tags, die wie Stack Overflow mit jQuery schweben
EDIT: Nicht, dass Mouseover i das Untermenü Add Jquery to favorite tags
Dies sollte die Arbeit tun.
Ich habe es codiert fast genau so, wie Stackoverflow tut. Ich baute auf den bereits von @Reigel erstellten Button auf.
Hoffe, das hilft. Prost :)
EDIT: Die Antwort hier auch von jsFiddle auf Anfrage hinzugefügt.
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();
});
Für eine einfache Hover-Effekt zeigt möchten, sollten Sie wirklich css
verwenden, wie
a.hover:hover {
background-color: #ff0000;
}
zum Beispiel.
Wenn es muss in jQuery sein, würde es aussehen
$('a.myanchorclass').hover(function(){
$(this).css('background-color', '#ff0000');
}, function(){
$(this).css('background-color', '#000000');
});
sieh mir edit .. –
bitte helfen Sie mir .. –
Ich kann nicht sehen, warum das ist downvoted, scheint wie eine vollkommen gültige Lösung? –
ich beide einig, betonen nur, absolut Sie können die Verwendung: schweben in CSS, wenn Sie Browser zielen neuere dann IE6 , IE6 funktioniert nicht mit: hover, es sei denn, es ist ein Link.
es mit nur einfachen CSS getan werden könnte, warum jQuery benötigen? – Reigel
nice attitude du hast es geschafft ... – Reigel
@Reigel Wenn du die Hover-Tags nur für CSS verwendest, werden viele mobile Geräte nicht darauf zugreifen können, da sie keine funktionale Unterstützung für das Hover-Attribut bieten. – Jaryl