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

还有一个黑色的演示