Jquery mouse hover color change

Question

I am converting flash ad into html5 ad.

I am copying this demo link.

I just want to make mouse hover effect. In the demo if mouse goes to details text then the whole banner color changes to black and text of disclaimer appears. How to implement this?

This is my code 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

If I understand your issue correctly this may help:

Demo Fiddle

jQuery has a built in .hover() method. Here I'm using it to toggle a class on the wrapper and show the hidden copy block.

JS:

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

Answer 2

If you don't need animations, you can just do this:

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

And then use CSS for the styling:

.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

You Again! did you use that windy plugin or no?

i didn't understand what you want but maybe this is your answer:

first you should know about color:color in web is Red Green Blue, You can take the X-point and Y-point of your jquery code and write some math formal for that:

jsfiddle

#wrapper:hover #mainContainer
{

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

 color:white;
}

and a demo in black color demo