[gelöst] - On Hover von Div #a img in div #b ändern

elChupete · 19.08.2017

Moin moin,

Ich habe folgendes html Gerüst

HTML:

<body>

    <header class="header">
        <div class="jumbo">
            <h1>my.page</h1>
            <p>Herzlich Willkommen</p>
        </div>
    </header>
   
    <div class="row">
        <div class="col m1"></div>
        <div id="stefan" class="txtstandard container _alignCenter col m4">
            <p><a href="/stefan.html">Stefan</a></p>
        </div>
        <div class="col m2"></div>
        <div id ="sonja" class="txtstandard container _alignCenter col m4">
            <p><a href="/sonja.html">Sonja</a></p>
        </div>
        <div class="col m1 back"></div>
    </div>

   
    <div id="wrapper" class="_width100 back">
          <img src="images/back_grey.png" class="grey">
        <!--  
            <img src="images/back_purple.png" alt="Hamburg" class="purple">
            <img src="images/back_yellow.png" alt="Hamburg" class="yellow">
        -->  
    </div>
   

    <script>
       
    </script>
   
</body>

Ich würde gerne wenn über div id=Stefan gehovert wird, das Bild von #wrapper in back_purple.png ändern. Das soll per fade passieren.

Am liebsten nur mit css (js ist okay wenns gar nicht anders geht.)

Da #wrapper ausser halb vom div class="row" liegt habe ich keine funktionierende css hover function gefunden.

(also z.B. #stefan:hover > #wrapper )

Geht das irgendwie?

Danke Stefan

KOJOTE · 19.08.2017

Ich kann dir da jetzt direkt leider nicht helfen, maximal durch die Antwort nochmal anschieben.
Aber mal eine Idee bzw. laut gedacht:
Kann man sich das denn auf einer Seite, auf welcher dass so oder so ähnlich bereits programmiert ist nicht auslesen?

elChupete · 19.08.2017

Naja es geht ja, wenn #b direkt nach oder innerhalb von #a steht.

Ich werde wohl was mit JS script machen.

Also das Bild als background-image von #wrapper. #wrapper bekommt ne klasse an der die image property hängt und wenn über #stefan / #sonja gehovered wird, dann die klasse per JS umsetzen. Per CSS Transition faden und gut. Das müsste gehen.

Bin leider nicht so fit in JS und werde das wohl erstmal länger rumprobieren, aber gehen sollte das gem. http://css3.bradshawenterprises.com/cfimg/ dem06 wohl irgendwie

elChupete · 19.08.2017

Solution:

Habs jetzt mit jquery gelöst

HTML:

 <script>
    $(document).ready(function(){
        jQuery('#stefan').hover(function()
{
jQuery('#wrapper').css("background-image", "url(http://www.mypage.de/back_purple.png)");
}).mouseleave(function(){
jQuery('#wrapper').css("background-image", "url(http://wwwmypage.de/back_grey.png)");
});
});
    </script>

und

HTML:

#wrapper
{
-webkit-transition: background-image .5s ease-in-out;
  -moz-transition: background-image .5s ease-in-out;
  -o-transition: background-image .5s ease-in-out;
  transition: background-image .5s ease-in-out;

}

Flackert zwar machmal, wenn das Bild nicht geladen ist, aber geht

[gelöst] - On Hover von Div #a img in div #b ändern

elChupete

Aktives Mitglied

KOJOTE

Aktives Mitglied

elChupete

Aktives Mitglied

elChupete

Aktives Mitglied