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); 
    }); 
}