Bild anzeigen bei Mouseover

Wie kann ich ein Bild anzeigen, wenn Maus darüber? Ich muss auch unterstreichen, den text neben dem Bild auf der Maus über? Auf mouseout muss ich ausblenden, das Bild und der text wieder normal.

Dies ist mein html-Feld

<img src="img.jpg"> Name

Wenn ich jetzt die Seite lädt, ich will nicht, um das Bild anzuzeigen, es sei denn, ich habe Sie mit der Maus über die Stelle erscheinen soll.

Bitte zeigen Sie einige code

InformationsquelleAutor Sarah McLachlane | 2013-09-13

CSS

#test{
    display:none
}

HTML

<img id="test" src="img.jpg"/> <span>Name</span>

jQuery

  $(document).ready(function () {
   $('span').on('mouseenter', function () {
       $('#test').show();
       $(this).css({
           "text-decoration": "underline"
       });
   }).on('mouseleave', function () {
       $('#test').hide();
       $(this).css({
           "text-decoration": ''
       });
   });;

});

Dokumentation

InformationsquelleAutor Anton

4

Können Sie es tun, die unter Verwendung des hover Veranstaltung.

jQuery:
```
$(document).ready(function () {
    $('span').hover(function(){
        $(this).addClass('underline'); //to make text underlined on hover
        $('#image').show(); //displays image on mouse in
    },function(){
        $(this).removeClass('underline'); //remove underline on mouse out
        $('#image').hide(); //hides image on mouse out
    });
});
```
HTML:
```
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
```
CSS:
```
.hidden{
    display: none;
}
.underline{
    text-decoration: underline;
}
```
funktionsfähige Demo

Das Bild wird nicht angezeigt, wenn die mit Ihrem code :/ Wenn ich den Mauszeiger über den <span> das element wird Unterstrichen und die Klasse wechselt zu Unterstrichen, aber das Bild wird nicht angezeigt
Das ist wahrscheinlich, weil der jQuery-version und das Bild nicht da ist. Bitte versuchen Sie es Geige.
Hm mein JQuery version ist die 2.1.4 und mein Bild geladen werden soll.. Aber da Ihre Geige arbeitet der Fehler muss auf meiner Seite sein. Danke für die schnelle Antwort!
Es tut mir Leid für diese Umstände, @Harry. Ich habe gerade die Klasse des Bildes zu foo und die Klasse in der css. Wie es scheint, hat es einige Probleme bei der Interaktion mit bootstrap versteckte Klasse! Jetzt funktioniert es 🙂 außerdem wäre ich sehr daran interessiert, wie, um die schriftart, um die Spannweite noch Platz bleiben, statt immer "verdrängt" durch das Bild
Wow, dass es tatsächlich gemacht 😀 ich wünschte, ich könnte upvote Ihre Antwort zweimal 😛 vielen Dank @Harry. Habt einen schönen Tag!

InformationsquelleAutor Harry
1

Als beantwortet Anton, können Sie diese auch ein.
```
$(document).ready(function () {    
   $('span').hover(
    function () {
        alert("1");
        $('#test').show();
    },
    function () {
        alert("2");
        $('#test').hide();
    }
   )
});
```
jsfiddle.net/Vgj8q/1 ich habe Alarm nur zur Information prüfen, ob es funktioniert.
Fügen Sie den code aus Ihrer Geige zu beantworten
Ich weiß nicht, wie das zu tun. Ich habe es versucht, aber nicht erfolgreich war. Können Sie bitte führe mich?
Wenn das war ", antwortete Anton", warum nach einer anderen Antwort?
Ich Tat das, weil ich damals nicht wusste, wie einfügen fiddle link in meiner Antwort selbst. So sagte ich es auf meine Antwort. Und außerdem, ich glaube nicht, lieber nehmen Sie jemand anderes Guthaben.

InformationsquelleAutor Ganesh Pandhere

Jquery:-

    $(document).ready(function(){
       $("#textDiv").mouseover(function(){
    $("#imageDiv").hide();
   });

   $("#textDiv").mouseout(function(){
    $("#imageDiv").show();
   });
    });

HTML:-

    <div id="textImage">
       <div id="imageDiv" style="float:left;">
          <img src="../images/login_background.png"></img>
       </div>
       <div id="textDiv"style="float:left;">
          <a href="#">Name</a>
       </div>
</div>

CSS:-

    #textImage a {text-decoration:none;}
    #textImage a:hover {text-decoration:underline;}

InformationsquelleAutor Vipin Dhiman

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Test</title> 
  <script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
  <style type='text/css'>
       #test{
        display:none
    }
  </style>
    <script type='text/javascript'>
  $(window).load(function(){
  $(document).ready(function () {
       $('span').on('mouseenter', function () {
           $('#test').show();
           $(this).css({
               "text-decoration": "underline"
           });
       }).on('mouseleave', function () {
           $('#test').hide();
           $(this).css({
               "text-decoration": ''
           });
       });;
    });
  });
  </script>
</head>
<body>
    <img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>

InformationsquelleAutor woondark

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.