Question

发现这个伟大的jsfiddle http://jsfiddle.net/4mE3b/4/近似于我的需求。我需要一个方面，这个小提琴不提供，我找不到答案。

我希望第一个元素，在这种情况下是红色块，就像一个默认图像，所以当页面加载时，它显示为红色。但是，当其他元素悬停时，我希望它改变它的状态。

HTML

<div class="red blur-me"></div>
<div class="blue blur-me"></div>
<div class="green blur-me"></div>
<div class="orange blur-me"></div>
<div class="black blur-me"></div>

的Javascript

blurredImages = $( '.blur-me' ); 
blurredImages.on( "mouseenter", function () {
$( this ).addClass( "blurred" );    
})  
blurredImages.on( "mouseleave", function () { 
$( this ).removeClass( "blurred" );     
})

CSS

.red, .blue, .green, .orange, .black {

width: 80px;
height: 80px;
margin: 6px;}

.red {
background-color: red;}

.red blur-me {background:green;}

.blue {
background-color: blue;
opacity: 1;}

.green {
background-color: green;
opacity: 1;}

.orange {
background-color: orange;
opacity: 1;}

.black {
background-color: black;
opacity: 1;}

.blurred {
opacity: 0.5;}

任何帮助都会很棒！

Answer 1

你应该把它们全部放在一个包装div中，然后在mouseenter和mouselave上切换它的类

HTML
<div id="wrapper">
   <div class="red blur-me"></div>
   <div class="blue blur-me"></div>
   <div class="green blur-me"></div>
   <div class="orange blur-me"></div>
   <div class="black blur-me"></div>
</div>

jQuery
$('.blur-me').hover(function(){ 
  var that = $(this);
   $('#wrapper').removeClass();
   $('#wrapper').addClass(that.attr('class').split(' ')[0] + '-hovered');
});

这将在红色悬停时将红色悬停的类名添加到包装div中，这样您可以在悬停时响应每个元素并相应地更改CSS，例如：

.red-hovered .red{
    opacity: .9;
}

我希望这就是你要求的

当其他元素被mousedover时，进行默认元素更改

1 个答案: