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

Answer 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悬停时，btn-primary应该采用下面的css。

JSFIDDLE

CSS鼠标悬停按钮颜色变化

2 个答案: