大家好，我不确定这是 Java 脚本还是 CSS，但我在一个盒子里看到了一张图片，当用户将鼠标悬停在它上面时，它会改变颜色(有 4 个)。我的问题是我如何得到它，所以当用户将鼠标悬停在一个盒子上时，其他所有东西都会消失。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
.meh1
{
height: 200px; /*Specify Height*/
width: 200px; /*Specify Width*/
border: 3px solid blue; /*Add 1px solid border, use any color you want*/
text-align:center; /*Align the text to the center*/
}
.meh1:hover
{
border: 3px solid orange;
}
.meh2
{
height: 200px; /*Specify Height*/
width: 200px; /*Specify Width*/
border: 3px solid blue; /*Add 1px solid border, use any color you want*/
text-align:center; /*Align the text to the center*/
}
.meh2:hover
{
border: 3px solid orange;
}
</style>
<script type="text/javascript">
var $mehs = $('.meh');
$mehs.hover(function(){
$mehs.not(this).fadeTo(200, 0.25);
}, function(){
$mehs.fadeTo(200, 1);
});
</script>
</head>
<body>
<div id="meh">
<div class="meh1">
<img src="cw3.jpg" alt="Name">
</div>
<div class="meh2">
<img src="cw2.jpg" alt="Name">
</div>
</div>
</body>
</html>
最佳答案
它是 javascript...最简单的方法是使用 jQuery。 (根据你的其他问题，我认为你很熟悉)。
假设所有的 div 都有 meh 类:
var $mehs = $('.meh');
$mehs.hover(function(){
$mehs.not(this).fadeTo(200, 0.25);
}, function(){
$mehs.fadeTo(200, 1);
});
我使用了 fadeTo()，因为这会保持您的布局(fadeOut() 会将元素设置为 display:none; 并影响您的页面布局)
关于javascript/css 淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13675606/