html - CSS鼠标悬停按钮颜色变化

Question

这是我的 code .我正在尝试鼠标悬停样式，当我将鼠标拖到按钮上时它工作正常。但是我不想将鼠标拖到按钮上以更改按钮文本的颜色我想要的是当我将鼠标移到包装 div 内时，它是一个主 div，在该 div 内设置所有元素然后设置文本颜色按钮应随鼠标光标一起变化。

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

有什么建议吗？

Answer 1

CSS 更改

#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