Mit Javascript CSS Background-Image ändern

IncepTer

Hallo Freunde,

wie im Titel beschrieben, möchte ich gern mit Javascript ein Hintergrundbild ändern.
Sobald der Benutzer über einen Link fährt, soll sich dazu ein Bild aufzeigen und wenn
er diesen wieder verlässt, soll es nicht mehr angezeigt werden.

Es gehen praktisch alle CSS Befehle bis auf das Background Image.
Wenn ich diesen Befehl normal in CSS ausführen lassen, geht es.
Pfad ist also auch korrekt.
Hat da jemand eine Idee?

Code

HTML:
<a id="ab" href="mailto:email@.com?subject=Kontakt-Homepage">E-Mail</a>

 <script>              
  $(document).ready(function(){
                  $("#ab").mouseout(function(){
                    $(".intro_bilder").css("background-image", "url('../bilder/ma/kb.jpg')");
                    $(".intro_bilder").css("background-size", "cover");
                  });


                $("#ab").mouseout(function(){
                     $(".intro_bilder").css("display", "none");
                  });
  });
</script>

Alles anzeigen

Jemand eine Idee, wieso nur Background Image nicht geht?

Danke

basti1012

Ich gehe mal davon aus das der Container kein Inhalt hat mit den Bild ? Deswegen wird höhe und breite wahrscheinlich auf 0 Pixel stehen.
Versuch es mal so

Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="ab" href="mailto:email@.com?subject=Kontakt-Homepage">E-Mail</a>
<div class="intro_bilder"></div>     
 <script>       
  $(document).ready(function(){
     $("#ab").hover(function(){
       $(".intro_bilder").css({
'background-image': 'url(http://sebastian1012.bplaced.net/bilder/homer.jpeg)',
      'background-size':'contain',
      'height':'200px',
      'width':'200px',
      'display':'block'
       }).mouseout(function(){
            $(".intro_bilder").css('display','none');
       })
     });
  }); 
 
</script>

Alles anzeigen

Den rest wirst du dann hinbekommen

Mit Javascript CSS Background-Image ändern

Tags

Benutzer online in diesem Thema