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

如果我理解你的问题，这可能会有所帮助：

<强> Demo Fiddle

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

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

Answer 4

你再来一次！ 你使用那个多风的插件还是没有？

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

首先你应该知道颜色：网页中的颜色是红绿蓝，你可以拿你的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;
}

以及黑色demo

的演示

Jquery鼠标悬停颜色变化

4 个答案: