Ändern div Bild beim Schweben auf der Liste der Links in separaten div

Question

Ich versuche, eine einfache Seite mit einer Kopf- und Fußzeile am oberen und unteren Rand des Browser-Fensters, mit reaktionsfähigen Inhalt zwischen zu verankern. Für den inneren Inhalt verwende ich einen Flexbox-Wrapper mit einer Liste von Links auf der linken Seite (in seinem eigenen div) und einem anderen div auf der rechten Seite mit den Bildern.

Ich habe so viel Arbeit, aber jetzt würde ich gerne das Bild in der div auf der rechten Seite ändern, je nachdem, auf welchem ​​Link auf der linken Seite Sie zuletzt schwebte. Ähnlich wie http://department.nyc/ (klicken Sie auf "Clients" in der linken unteren Ecke und dann auf die Liste der Links). Scheint wie javascript/jquery ist die Antwort, aber nach unzähligen Suchen, konnte ich immer noch nicht erreichen, was ich will. Diese

ist ziemlich viel, wie ich die Seite gestückelt haben zusammen:

HTML

<div class="wrapper"> 
<header class="header">Header</header> 
<div class="workWrapper"> 
    <div class="workText"> 
    <ul class="workList"> 
    <li id="ex1"><a href="#">Example 1</a></li> 
    <li id="ex2"><a href="#">Example 2</a></li> 
    <li id="ex3"><a href="#">Example 3</a></li> 
    <li id="ex4"><a href="#">Example 4</a></li> 
    <li id="ex5"><a href="#">Example 5</a></li> 
    <li id="ex6"><a href="#">Example 6</a></li> 
    </ul> 
    </div> 
    <div class="workImages"> 
    <img src="#"> 
    </div> 
</div> 
<footer class="footer">Footer</footer> 
</div> 

CSS

.workList { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 

.wrapper { 
display: flex; 
min-height: 100%; 
flex-direction: column; 
} 

.workWrapper { 
width: 100%; 
display: flex; 
flex: 1; 
align-items: center; 
} 

.workText { 
float: left; 
width: 30%; 
} 

.workImages { 
float: right; 
width: 70%; 
margin-right: 100px; 
background-color: green; 

img {max-width: 100%;} 

https://jsfiddle.net/symjcfsk/

Answer 1

Es ist möglicherweise von vielen Möglichkeiten. Zum Beispiel, Sie data-* attribules von hovered Link zu speichern Bild-URLs verwenden:

$(".workList a").hover(function() { 
 
    var s = $(this).data("img"); 
 
    $(".workImages img").attr("src", s); 
 
});

.workList { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.workWrapper { 
 
    width: 100%; 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.workText { 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.workImages { 
 
    float: right; 
 
    width: 70%; 
 
    margin-right: 100px; 
 
    background-color: green; 
 
    img { 
 
    max-width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <div class="workWrapper"> 
 
    <div class="workText"> 
 
     <ul class="workList"> 
 
     <li><a href="#" data-img="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">Example 1</a></li> 
 
     <li><a href="#" data-img="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png">Example 2</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="workImages"> 
 
     <img src="#"> 
 
    </div> 
 
    </div> 
 
    <footer class="footer">Footer</footer> 
 
</div>

Answer 2

Einer der Alternative, diese Art zu erreichen Affekt ist die Verwendung von „MouseEnter-“ zu machen und „mouseout " Veranstaltungen. Etwas wie folgt aus:

$(".workList").on("mouseenter",function(event){ 
    var list_elem = event.target; 
    // your code to change the background image accordingly. 
}); 

Ähnlich das Standardbild wiederherzustellen:

$(".workList").on("mouseout",function(event){ 
    // Restore the default image. 
}); 

Eine weitere Optimierung kann für Hintergrund verwendet durch die Verfolgung des letzten Bildes durchgeführt werden, damit wir nicht das Bild ändern, wenn Schweben über den gleichen Link wieder.

Answer 3

reine html & CSS nicht die Arbeit machen können, Sie importieren js benötigen, unten ist mein Demo Ich benutze Hintergrund-Farbe des img src geändert Stil simulieren, einzigartige Funktion ist sehr einfach `

var mouseover = function (index) { 
 
    \t document.getElementById('workImages').className = 'workImages bgcolor' + index; 
 
    }

.workList { 
 
    list-style-type: none; 
 
    width: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.workList& >li { 
 
    padding: 10px 5px; 
 
} 
 
.workList a { 
 
    width: inherit; 
 
    display: block; 
 
} 
 

 
.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.workWrapper { 
 
    width: 100%; 
 
    height: 230px; 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
.workText { 
 
    position: absolute; 
 
    width: inherit; 
 
} 
 

 
.workImages { 
 
    width: 100%; 
 
    margin-right: 100px; 
 
    height:inherit; 
 
    background-color: #E1BEE7; 
 
    transition-duration: 0.5s; 
 
} 
 
.workImages.bgcolor1 { 
 
    background-color: #CE93D8; 
 
} 
 
.workImages.bgcolor2 { 
 
    background-color: #CE93D8; 
 
} 
 
.workImages.bgcolor3 { 
 
    background-color: #BA68C8; 
 
} 
 
.workImages.bgcolor4 { 
 
    background-color: #AB47BC; 
 
} 
 
.workImages.bgcolor5 { 
 
    background-color: #9C27B0; 
 
} 
 
.workImages.bgcolor6 { 
 
    background-color: #8E24AA; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <div class="workWrapper"> 
 
    <div class="workText"> 
 
     <ul class="workList"> 
 
     <li id="ex1"><a href="#" onmouseover="mouseover(1)">Example 1</a></li> 
 
     <li id="ex2"><a href="#" onmouseover="mouseover(2)">Example 2</a></li> 
 
     <li id="ex3"><a href="#" onmouseover="mouseover(3)">Example 3</a></li> 
 
     <li id="ex4"><a href="#" onmouseover="mouseover(4)">Example 4</a></li> 
 
     <li id="ex5"><a href="#" onmouseover="mouseover(5)">Example 5</a></li> 
 
     <li id="ex6"><a href="#" onmouseover="mouseover(6)">Example 6</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="workImages" id="workImages"> 
 
     <!-- use bgcolor instead of img for display--> 
 
     <!--<img src="#">--> 
 
    </div> 
 
    </div> 
 
    <footer class="footer">Footer</footer> 
 
</div>