将鼠标悬停在另一个div时如何更改div背景图像
[英]How to change a div background image when hover an other div
问题描述
i have using one div to display a image. 
我已经使用一个div来显示图像。 the id name of the div is first , i gave both background image and hover image using css. div的id名称是first ，我使用css给出了背景图片和悬停图片。 now i have to hover an first div image when hovering an another div. 现在，我必须将鼠标悬停在另一个div上时悬停第一个div图像。
here below the example 在下面的示例中
<div id="first"></div>
default background image of first div is - bgimg.jpg div的默认背景图像是-bgimg.jpg
The hover image of first div is - hoverbgimg.jpg 第一个div的悬停图片是-hoverbgimg.jpg
THE ANOTHER DIV IS <div id="second"></div> <div id="second"></div> DIV是<div id="second"></div>
here when i am hovering second div the first div image should be change . 在这里，当我将鼠标悬停在第二个div时 ， 应该更改第一个div图像 。
4 个解决方案
解决方案1
1 2014-06-11 11:15:47
This cannot be done through CSS only. 这不能仅通过CSS来完成。
Add below JS code in Js file 在Js文件中添加以下JS代码
$(document).ready(function(){
$("#second").on("hover", function(){
$("first").css("background", "imagename.jpg");
});
});
Dont forget to include jquery file first. 不要忘记首先包含jquery文件。
解决方案2
0 2014-06-11 11:21:19
yes its possible if you try and work with jquery. 是的，如果您尝试使用jquery，则有可能。 try this line of code, just copy and paste: 尝试以下代码行，只需复制并粘贴：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dd").hover(function(){
$("#ddd").css("background-color","yellow");
},function(){
$("#ddd").css("background-color","pink");
});
});
</script>
</head>
<body>
<div id="dd">Hover the mouse pointer over this paragraph.</div>
<div id="ddd">Hover the mouse pointer over this paragraph.</div>
</body>
</html>
解决方案3
0 2014-06-11 11:23:49
Using jquery you can catch the hover event in the second div and implement an action for the mouseover and mouseout over the first div: 使用jquery可以在第二个div中捕获悬停事件，并在第一个div上实现mouseover和mouseout的操作：
$( "#second" ).hover(
function() {
$("#first").mouseover();
}, function() {
$("#first").mouseout();
});
解决方案4
0 2014-06-11 11:31:42
Have a look at below code sample: 看看下面的代码示例：
Using JavaScript: 使用JavaScript：
<div id ="first" style="min-height: 100px;width: 100px; background-image: url('../Content/images/bgImage.JPG') "></div>
<div id ="second" style="width:100px;height: 100px;background-color:#191970" onmouseover="changeFirst(true)" onmouseout="changeFirst(false)"></div>
<script type="text/javascript" language="javascript">
function changeFirst(isHover) {
if (isHover) {
document.getElementById('first').style.backgroundImage = "url('../Content/images/hoverBgImage.png')";
} else {
document.getElementById('first').style.backgroundImage = "url('../Content/images/bgImage.JPG')";
}
}
</script>
Using JQuery: 使用JQuery：
<div id="first" style="min-height: 100px; width: 100px; background-image: url('../Content/images/bgImage.JPG')"></div>
<div id="second" style="width: 100px; height: 100px; background-color: #191970"></div>
<script type="text/javascript" language="javascript">
$('#second').hover(function () {
$('#first').css('background-image', "url('../Content/images/hoverBgImage.png')");
},
function () {
$('#first').css('background-image', "url('../Content/images/bgImage.JPG')");
}
);
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.