Question

请注意，当悬停时，右箭头将其位置更改为左侧。箭头需要保持在右侧的位置。我试图使用位置，保证金，但没有一个工作。

当悬停时，按钮应位于＃4d4d4d（灰色）。

HTML

<div class="fluid FindHome-div">
<h1><a href="http://www.ntreisinnovia.net/ntr/idx/index.php?key=b74b4ef49443e4ac6699324016bbaec5" class="FindHome" target="_blank">Find your home</a>     </h1>
</div>

CSS

.FindHome {background-color:#09F; width:300px; border:1px solid #09F; padding:10px 40px 10px 15px; border-radius:5px; display:block; margin-left:auto; margin-right:auto; background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat; background-position:320px center; margin-bottom:35px; overflow: hidden; text-decoration:none; color:#ffffff;}
.FindHome:hover {background:#4d4d4d; border:1px solid #4d4d4d; background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat;}
.FindHome-div {display:inline-block;}

Answer 1

还为background position类

添加hover属性

.FindHome:hover {
    border:1px solid #4d4d4d; 
    background:#4d4d4d url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat 320px center    
}

<强> DEMO

事实上，您不必在悬停类中再次添加bg图像网址。您正尝试仅更改边框，因此仅添加该边框。

.FindHome:hover { border:1px solid #4d4d4d;}

<强> DEMO 2

Answer 2

不要两次写background属性。仅定义一个。并定义bacground-position。

你的CSS应该是这样的

.FindHome:hover {border:1px solid #4d4d4d; background: #4d4d4d url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat;  background-position:320px center;}

这是你的小提琴http://jsfiddle.net/nA4P9/21/

当悬停按钮时箭头改变了位置

2 个答案: