I am seeking a solution that will function seamlessly across all browsers to reach a wider audience. I am looking for a list where each "li" element changes the background of a specific "div." You can see the desired look here.
My current code is as follows:
HTML:
<div id="container">
<div id="div1">
<ul>
<li>item1<li>
<li>item2<li>
<li>item3<li>
<li>item4<li>
<li>item5<li>
<li>item6<li>
</ul>
</div>
<div id="div2>
</div>
</div>
CSS:
#div1 {
float: left;
width: 50%;
height: auto;
}
#div2 {
background-size: 100%;
height: 422px;
width: 50%;
float: right;
}
#container {
min-width: 768px;
max-width: 991px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
The two "divs" are already positioned next to each other. If there is an error in my setup, please let me know. I want the list items to change the background image of the div on the right. However, since the list is not the parent element of the div, I'm struggling with finding a solution using jQuery. Thank you for any assistance you can provide!
I apologize if this question has been asked before and appreciate your patience.
EDIT:
You can see a better concept image here.