CSS mouse hover button color changes

debugcn Published at Dev

user3754380

This is my code. I am trying mouse hover style which is working fine when i am dragging my mouse over button. But i dont want to drag my mouse over the button to change the color of the button text what i want is when i move my mouse inside the wrapper div which is a main div and inside that div all elements are set then text color of the button should change along with the mouse cursor .

<div id="wrapper">
    <div id="mainContainer">
        <p class="copyrights" id="copyrights">*Disclaimer</p>
        <div>
            <img id="Image_Car" src="http://i.share.pho.to/de4502fd_o.png" />
        </div>
        <div id="headlineText">
            <p id="headline1Txt" >Sample bag1</p>
            <p id="headline2Txt" >Sale Price $25</p>
            <p id="headline3Txt" >Sale $14<p>
        </div>
        <div id="disclaimer" >
            Details*
        </div>
        <div id="Image_logo">
            <img id="Imglogo" src="http://i.share.pho.to/88b65e5c_o.png" />
        </div>

        <div>
            <button class="btn btn-primary" type="button"  id="ctaBtn">
                <div id="fadeIn" >  Learn More Now </div>
            </button>
        </div>
    </div>
</div>

Any suggestions?

Richie Fredicson

css change

#wrapper:hover .btn-primary,
.btn-primary:active,.btn-primary.active,.btn-primary.disabled,
.btn-primary[disabled]{color:#ffffff;background-color:#0d2a4d;}
#wrapper:hover .btn{color:#DCDCDC;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}

Working Js Fiddle

Collected from the Internet

Please contact [email protected] to delete if infringement.