I'm in the process of designing a webpage that features a header and footer fixed to the top and bottom of the browser window, with adaptable content in between. To structure the inner content, I've opted for a flexbox wrapper containing a list of links on the left (within its own div) and an adjacent div on the right showcasing images.
Although I have successfully implemented this layout, my next goal is to dynamically change the image displayed in the right div based on the last link hovered over on the left side. This functionality is similar to what you'll find on (try clicking "clients" at the bottom left corner and then hover over the list of links). While it seems like Javascript/jQuery would be the solution, my attempts thus far have not yielded the desired outcome.
This is a basic outline of how my page components are structured:
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%;}