Jquery鼠标悬停颜色变化

Question

我将Flash广告转换为html5广告。

我正在复制此演示link。

我只是想让鼠标悬停效果。在演示中，如果鼠标移动到细节文本，则整个横幅颜色变为黑色，并且出现免责声明文本。如何实现这一点？

这是我的代码JSFiddle

<div id = "wrapper" >  
<div id="mainContainer"> 
    <div id="text"> 
     <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" /> 
    </div> 
    <div id="Div1"> 
     <p id="discalimer">Details*</p> 
    </div> 
</div> 
</div> 

Answer 1

如果你不需要动画，你可以这样做：

$('#disclaimer').hover(
    function() { 
     $('#wrapper').addClass('hovered'); 
    }, function() { 
     $('#wrapper').removeClass('hovered'); 
    } 
); 

然后使用CSS样式：

.copy {display: none;color: white; padding: 10px;} 
.hovered .copy { display: block; } 
.hovered #mainContainer { background: black; border-color: black; } 
.hovered #Image_Car { display: none; } 

http://jsfiddle.net/veDY6/27/

Answer 2

如果我理解你的问题正确，这可能帮助：

Demo Fiddle

的jQuery有一个内置的.hover()方法。在这里我使用它来切换包装器上的类并显示隐藏的复制块。

JS：

$('#discalimer').hover(
    function() { 
     $('#wrapper').toggleClass('hovered'); 
     $('.copy').show(); 
    }, function() { 
     $('#wrapper').toggleClass('hovered'); 
     $('.copy').hide(); 
    } 
); 

Answer 3

你一次！ 你有没有使用那个有风的插件？

我不明白你想要什么，但也许这就是你的答案：

首先你应该知道颜色：颜色在网页是红，绿，蓝，你可以在X点和Y点的jQuery代码，写一些数学形式为：

jsfiddle

#wrapper:hover #mainContainer 
{ 

background:silver; 
} 
#wrapper:hover 
{ 
background:black !important; 
    box-shadow:3px 3px 3px rgba(186,202,228,1); 

color:white; 
} 

和黑色的演示demo

Answer 4

Working demo

HTML

<div id="wrapper"> 
    <div id="mainContainer" class="mcClass"> 
     <div id="text"> 
      <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" /> 
     </div> 
     <div id="Div1"> 
      <p id="discalimer">Details*</p> 
      <p id="realDisclaimer" style="display:none">This is the real disclaimer</p> 
     </div> 
    </div> 
</div> 

CSS

#wrapper { 
    left: 50px; 
    top: 50px; 
    width: 300px; 
    height:250px; 
    position: absolute; 
} 

#realDisclaimer{ 
    color:white; 
} 
#Div1 { 
    top:142px; 
    left:76px; 
    width:50px; 
    height:30px; 
    position: absolute; 
} 
.unselectable, #Div1 p { 
    -webkit-user-select: none; 
    /* Chrome/Safari */ 
    -moz-user-select: none; 
    /* Firefox */ 
    -ms-user-select: none; 
    /* IE10+ */ 
    /* Rules below not implemented in browsers yet */ 
    -o-user-select: none; 
    user-select: none; 
    cursor:default; 
} 
.mcHoverState { 
    background-color:black; 
} 
.mcClass { 
    background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif'); 
} 
#mainContainer { 
    width:300px; 
    height:250px; 
    overflow: hidden; 
    position: absolute; 
} 
#Image_Car { 
    position:absolute; 
    overflow: hidden; 
    margin:60px 8px; 
    left: -120px; 
} 

JS

$(document).ready(function() { 
    bannerAnimation(); 
    $("#Div1").mouseenter(

    function (evt) { 
     $("#text").hide(); 
     $("#mainContainer").removeClass("mcClass").addClass("mcHoverState"); 
     $("#discalimer").hide(); 
     $("#realDisclaimer").show(); 
    }) 
     .mouseleave(

    function (evt) { 
     $("#realDisclaimer").hide(); 
     $("#text").show(); 
     $("#discalimer").show(); 
     $("#mainContainer").removeClass("mcHoverState").addClass("mcClass"); 
    }); 
}); 

function bannerAnimation() { 
    //Jquery Animation 
    $("#Image_Car").animate({ 
     left: "30" 
    }, 500, function() { 
     $("#Image_Car").animate({ 
      left: "10" 
     }, 200); 
    }); 
}