变化幅度时的背景悬停父元素

我已经在我的网站的以下部分： http://jsfiddle.net/4jr2r3nq/变化幅度时的背景悬停父元素

我想，如果我将鼠标悬停在主按钮，无论是button & full-circle更改背景颜色。你可以从这个例子看到，当我将鼠标悬停在主外形，只是它改变背景颜色，而不是半圆部分:(

.full-circle { 
 
border: 2px solid #1588CB; 
 
height: 35px; 
 
width: 35px; 
 
-moz-border-radius:30px; 
 
-webkit-border-radius: 30px; 
 
position:absolute; 
 
bottom:-20px; 
 
} 
 

 
button { 
 
background:#ffffff; 
 
border-radius: 10px; 
 
-moz-border-radius: 10px; 
 
-webkit-border-radius: 10px; 
 
border: 2px solid #1588CB; 
 
color:#1588CB; 
 
font-weight:400; 
 
height:200px; 
 
width:400px; 
 
position:relative; 
 
} 
 

 
/* overides ... */ 
 
.full-circle { 
 
    border-radius: 0 0 30px 30px; 
 
    border-top: none; 
 
    height: 17px; 
 
    background: #FFF; 
 
    left: 50%; 
 
    margin-left: -17px; 
 
    bottom: -19px; 
 
    line-height: 0; 
 
} 
 

 
button:hover, .full-circle:hover { 
 
    background:red 
 
}

<button>Learn More 
 
    <span class="full-circle">+</span> 
 
</button>

来源

2015-11-05 michaelmcgurk

更改徘徊风格这一点：

button:hover, button:hover > span{ 
    background:red 
}

来源

2015-11-05 09:52:10

太棒了！我也在这里更新了我的小提琴：http://jsfiddle.net/4jr2r3nq/1/谢谢你，Mr_Green :-) – michaelmcgurk

使用本 button:hover, button:hover .full-circle {...} 和方式，根据，border-radius不要求供应商prefixe小号

来源

2015-11-05 09:52:41

这很方便知道，法扎德 - 谢谢你！ – michaelmcgurk

变化

按钮：悬停。全圆：悬停

到

按钮：悬停，按钮：悬停>。全圆

来源

2015-11-05 09:55:06 Gacci

变化幅度时的背景悬停父元素

回答

相关问题