CSS鼠标悬停按钮颜色变化答案

【问题标题】：CSS mouse hover button color changesCSS鼠标悬停按钮颜色变化
【发布时间】：2014-07-31 06:48:23
【问题描述】：

这是我的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>

有什么建议吗？

【问题讨论】：

我不确定我是否理解正确。为什么不在你希望悬停生效的元素上设置悬停监听器，然后在里面更改你想要更改的元素？
加上上面的评论，all elements are set是什么？您是说在更改颜色之前需要进行一些额外的数据级别检查吗？
你想要jsfiddle.net/U4EF8/9？

标签： html css

【解决方案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

【讨论】：

那太完美了，我怎样才能添加手形光标？/
如果一切正常，请将答案标记为正常，以便其他人可以找到它

【解决方案2】：

你可以试试这个：

#wrapper:hover .btn-primary{
    color:#DCDCDC;
    background-color:#0d2a4d;
    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;
}

这意味着当 #wrapper 获得 hover 时，btn-primary 应该采用以下 css。

JSFIDDLE

【讨论】：