[英]background image change in css onmousehover
我正在尝试制作一个类似于mega菜单的菜单,但是对我来说什么都没用,我在粘贴代码以获取最简单的结果。
我有两个div,一个用于图像,一个用于菜单。 在其他div上的悬停链接图片上应更改。 CSS或JS对我来说没有问题。
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>
我已经使用click创建了一个代码示例,让我知道这是否是您想要的。 我的猜测是,如果我正确理解了您的问题,则可以将“ click”替换为“ hover”。
更新:捕获鼠标事件而不是单击
$(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>
有一个仅影响altImage
类的div的CSS规则:
#img_div.altImage {
background: url("images/alt.jpg");
}
使用javascript,在悬停时向div添加一个类:
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");
});
那应该工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.