jQuery鼠標懸停顏色變化

Question

我正在將Flash廣告轉換為html5廣告。

我正在復制此演示鏈接 。

我只想使鼠標懸停效果。 在演示中，如果鼠標移至詳細信息文本，則整個標題顏色變為黑色，並且出現免責聲明文本。 如何實現呢？

這是我的代碼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

如果我正確理解您的問題，這可能會有所幫助：

演示小提琴

jQuery具有內置的.hover()方法。 在這里，我使用它來切換包裝器上的類並顯示隱藏的復制塊。

JS：

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

Answer 2

如果您不需要動畫，則可以執行以下操作：

$('#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 3

工作演示

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

Answer 4

又是你！ 您是否使用了那個有風的插件？

我不明白您想要什么，但是也許這是您的答案：

首先，您應該了解有關顏色的信息：Web中的顏色是Red Green Blue，您可以將jquery代碼的X點和Y點用作相應的數學形式：

的jsfiddle

#wrapper:hover #mainContainer
{

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

 color:white;
}

還有一個黑色的演示