我有一个<button>css格式为pngbackground-image且具有width和的height限制。还<p>带有文字。实际上，这正在按预期方式更改，:hover但按钮图像没有更改。开启后，:hover我将css设置为将更background-position改为更大图像的不同部分。
我从堆栈溢出的其他答案中选取了一些代码，并尝试使它们适合我的需求。实际上，我已经尝试了好几天以使其正常工作，并在此过程中删除了大量代码。我创建了一个jsfiddle来显示有效的方法和无效的方法。对不起，您可能问的是与他人相同的事情。jsfiddle希望我做对了。
/*Testing buton and id add to basket without the anchor . so far not working*/
/* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
.frame {
float: left;
width: 300px;
min-height: 50px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black;
}
.frame:hover > .info > p{
font-size: 14px;
color:green;
}
.frame:hover > .button > img#add-to-basket1 {
background-position: 42px 0px;
}
/* also tried
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;} and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/
.info {
float: left;
max-width: 220px;
height: auto;
background-color: none;
margin-left: 20px;
vertical-align: middle;
line-height: 42px;
}
.info p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
color: #8F8F8F;
margin-top: 5px;
}
img.button {
border-radius: 100%;
display: inline-block;
background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');
height: 42px; width: 42px;
background-size: 85px 250px;
text-indent: -9999px;
line-height:42px;
float: left;
}
#add-to-basket1 { background-position: 0px 0px;}
<div class="frame">
<img class="button" id="add-to-basket1"/>
<div class="info">
<p>Preparing Your Home For Showing</p>
</div>
</div>像这样吗？
这是问题所在：
.frame:hover > .button > img#add-to-basket1 { }
这意味着您将根据您的代码引用img#add-to-basket1其中的内容.button。但是.button和img#add-to-basket1指相同的元素。因此您可以删除其中任何一个。就我而言，我只是搬走了.button。
/*Testing buton and id add to basket without the anchor . so far not working*/
/* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
.frame {
float: left;
width: 300px;
min-height: 50px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black;
}
.frame:hover > .info > p{
font-size: 14px;
color:green;
}
.frame:hover > img#add-to-basket1 {
background-position: 42px 0px;
}
/* also tried
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;} and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/
.info {
float: left;
max-width: 220px;
height: auto;
background-color: none;
margin-left: 20px;
vertical-align: middle;
line-height: 42px;
}
.info p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
color: #8F8F8F;
margin-top: 5px;
}
img.button {
border-radius: 100%;
display: inline-block;
background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');
height: 42px; width: 42px;
background-size: 85px 250px;
text-indent: -9999px;
line-height:42px;
float: left;
}
#add-to-basket1 { background-position: 0px 0px;}<div class="frame">
<img class="button" id="add-to-basket1"/>
<div class="info">
<p>Preparing Your Home For Showing</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句