auf hover-show Bearbeiten-Symbol auf der rechten

Ich habe einige Serien auf un-order-Listen, umwickelt mit <a href="#">Link</a> ich möchte die Karte Bearbeiten-icon, bei mouseover von <a href="#">Link</a>... wie geht das mit jquery?

<div class="user_welcome_dropDown_wrapper">
     <ul style="padding-left:0; margin-left:0;">
             <li><a href="#">Settings</a></li>
             <li><a href="#">Dummy Link</a></li>
             <li><a href="#">Dummy Link</a></li>
     </ul>

</div>
Sie geben ein wenig mehr, was du meinst mit "Karte Bearbeiten-icon", wo möchten Sie Platz?

InformationsquelleAutor subho das | 2011-11-24

  1. 6

    check this out;

    http://jsfiddle.net/M48tr/3/

    $("a").hover(function(){

$(this).append("<div>edit</div>")
}, function(){

$(this).children("div").remove();
})
    ist es nützlich für Sie ?
    obwohl einige tweaks nach mein Bedürfnis, aber insgesamt genau das was ich wollte.. danke..

    InformationsquelleAutor erimerturk

  2. 0

    Zu diesem Zweck sollten Sie mit Hilfe mouseenter und mouseleave zu append und prepend den link überall dort, wo Sie es wollen.

    InformationsquelleAutor Jan Dragsbaek

  3. 0

    Versuchen Sie Folgendes:

    $('a').mouseenter(function () {
    //show icon here
});
$('a').mouseleave(function () {
    //hide or remove icon here
});

    Wenn Sie nur wollen, um zu zeigen, das Symbol für Anker-tags mit a href-Attribut von # der 'a[href="#"]' - Selektor kann verwendet werden, statt.

    InformationsquelleAutor Rich O'Kelly

  4. 0

    Dies würde funktionieren im Grunde wie folgt:
    Sie haben:

    ...
<li><a href="#">Link</a><span class="additional">extra info</span></a></li>
...

    Mit dem span via CSS ausgeblendet:

    .additional{
display: none;
}

    und schließlich die jQuery:

    $('a').hover(function(){
$(this).next('.additional').show();
},function(){
$(this).next('.additional').hide();
});

    Sehen http://api.jquery.com/hover/ für mehr info

    InformationsquelleAutor m90

  5. 0

    jQuery ist ideal für alle möglichen Dinge, aber wäre des guten zuviel, hier. Dies kann leicht abgerissen werden, mit plain old HTML+CSS.

    http://jsfiddle.net/AzkPD/

    CSS:

    li {
width: 66px;
}

li:hover {  
background-image:url('http://glyphicons.com/wp-content/themes/glyphicons/images/updates.png');  
background-repeat:no-repeat;  
background-position:right center;
}​

    HTML:

    <ul>
    <li><a href="#">Settings</a></li>
</ul>​

    InformationsquelleAutor metaColin

Schreibe einen Kommentar