Reputation: 37
I am trying to make a menu like mega menu but nothing is working for me, I am pasting my code for simple most results.
I have two divs, one for image and one for menu. on hovering link image in other div should change. CSS or JS no issue for me.
HTML=====
<div>
<div id="img_div"></div>
<div id="links_div">
<ul>
<li><a href="">Show image 1</a></li>
<li><a href="">Show image 2</a></li>
<li><a href="">Show image 3</a></li>
<li><a href="">Show image 4</a></li>
<li><a href="">Show image 5</a></li>
</ul>
</div>
</div>
CSS======
<style>
#img_div{
height: 200px;
width: 200px;
background: url("images/default.jpg");
float: left;
}
#links_div{
float: left;
height: 200px;
width: 200px;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
display: block;
}
ul li a{
}
</style>
Upvotes: 1
Views: 57
Reputation: 3071
I have created a code sample using click let me know if this is what you are looking for. My guess is that you can replace "click" with "hover" if I have understood your problem correctly.
Update: Capture mouse events instead of click
$(document).ready(function() {
$("#links_div a").on("mouseenter", function() {
$("#img_div").addClass($(this).attr('data-class'));
});
$("#links_div a").on("mouseleave", function() {
$("#img_div").removeClass($(this).attr('data-class'));
});
});
#img_div {
height: 200px;
width: 200px;
background: url("http://placehold.it/200x200");
}
#img_div.a {
background: url("http://placehold.it/200x200?text=a");
}
#img_div.b {
background: url("http://placehold.it/200x200?text=b");
}
#img_div.c {
background: url("http://placehold.it/200x200?text=c");
}
#img_div.d {
background: url("http://placehold.it/200x200?text=d");
}
#img_div.e {
background: url("http://placehold.it/200x200?text=e");
}
#links_div {
float: left;
height: 200px;
width: 200px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: block;
}
ul li a {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="img_div"></div>
<div id="links_div">
<ul>
<li><a href="javascript:void(0)" data-class="a">Show image 1</a>
</li>
<li><a href="javascript:void(0)" data-class="b">Show image 2</a>
</li>
<li><a href="javascript:void(0)" data-class="c">Show image 3</a>
</li>
<li><a href="javascript:void(0)" data-class="d">Show image 4</a>
</li>
<li><a href="javascript:void(0)" data-class="e">Show image 5</a>
</li>
</ul>
</div>
</div>
Upvotes: 2
Reputation: 3098
Have a CSS rule that only affects the div with class altImage
:
#img_div.altImage {
background: url("images/alt.jpg");
}
Using javascript, add a class to the div on hover:
var links = document.getElementById("links_div");
links.addEventListener("mouseenter", function(e) {
document.getElementById("img_div").classList.add("altImage");
});
links.addEventListener("mouseleave", function(e) {
document.getElementById("img_div").classList.remove("altImage");
});
That should work
Upvotes: 1