Question

我的网站上有以下部分： http://jsfiddle.net/4jr2r3nq/

如果我将鼠标悬停在button＆amp;上的主按钮上，我会喜欢它。 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>

Answer 1

将悬停样式更改为：

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

Answer 2

使用它 button:hover, button:hover .full-circle {...} 顺便说一句，根据caniuse.com，border-radius不需要供应商前缀

Answer 3

更改

按钮：悬停，.full-circle：悬停

到

按钮：悬停，按钮：悬停＆gt; 。全圆

悬停父元素时更改跨度背景

3 个答案: