目標：懸停之前

我有一個在CSS中創建的按鈕。除了當我將鼠標懸停在它上面以外，整個區域都不會變綠。相反，它的一部分是白色的塊。我該如何解決？目標：懸停之前

button { 
 
     font-size: 1em; 
 
     background: #fff; 
 
     border-radius: 10px; 
 
     -moz-border-radius: 10px; 
 
     -webkit-border-radius: 10px; 
 
     border: 1px solid #1588cb; 
 
     color: #1588cb; 
 
     font-weight: 400; 
 
     height: 60px; 
 
     width: 300px; 
 
     position: relative; 
 
     margin: 25px 0 50px 0; 
 
     -webkit-box-sizing: content-box; 
 
     -moz-box-sizing: content-box; 
 
     -o-box-sizing: content-box; 
 
     box-sizing: content-box; 
 
    } 
 
    .full-circle { 
 
     display:block; 
 
     border: 1px solid #1588cb; 
 
     width: 45px; 
 
     /* 
 
     -moz-border-radius: 45px/36px; 
 
     -webkit-border-radius: 45px/36px;*/ 
 
     -webkit-box-sizing: content-box; 
 
     -moz-box-sizing: content-box; 
 
     -o-box-sizing: content-box; 
 
     box-sizing: content-box; 
 
     border-radius: 45px/38px; 
 
     height: 41px; 
 
     background: #fff; 
 
     position: absolute; 
 
     left: 50%; 
 
     margin-left: -17px; 
 
     bottom: -17px; 
 
    } 
 
    .full-circle:before { 
 
     content:'+'; 
 
     width: 47px; 
 
     height: 26px; 
 
     background-color: white; 
 
     position: absolute; 
 
     left: -1px; 
 
     top: -1px; 
 
     line-height: 53px; 
 
    } 
 

 
button:hover, button:hover > span { 
 
    background:green; 
 
    color:white 
 
} 
 
}

<button>News <span class="full-circle"> 
 
</span> 
 
</button>

來源

2015-11-12 michaelmcgurk

添加button:hover > .full-circle:before格式化背景綠色。看到的片段

button { 
 
    font-size: 1em; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border: 1px solid #1588cb; 
 
    color: #1588cb; 
 
    font-weight: 400; 
 
    height: 60px; 
 
    width: 300px; 
 
    position: relative; 
 
    margin: 25px 0 50px 0; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    -o-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 
.full-circle { 
 
    display:block; 
 
    border: 1px solid #1588cb; 
 
    width: 45px; 
 
    /* 
 
    -moz-border-radius: 45px/36px; 
 
    -webkit-border-radius: 45px/36px;*/ 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    -o-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    border-radius: 45px/38px; 
 
    height: 41px; 
 
    background: #fff; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -17px; 
 
    bottom: -17px; 
 
} 
 
.full-circle:before { 
 
    content:'+'; 
 
    width: 47px; 
 
    height: 26px; 
 
    background: #fff; 
 
    position: absolute; 
 
    left: -1px; 
 
    top: -1px; 
 
    line-height: 53px; 
 
} 
 
button:hover, 
 
button:hover > span, 
 
button:hover > .full-circle:before { 
 
    background:green; 
 
    color:white 
 
}

<button>News <span class="full-circle"> 
 
    </span> 
 
</button>

來源

2015-11-12 07:34:35

非常感謝。 – michaelmcgurk

感謝您的提示 - 只需等到時間流逝，我接受您的答案;-) – michaelmcgurk

問題：當你將鼠標懸停在該按鈕，你忘了改變的background-colorspan:before（background-color: white;）爲綠色。

只需將此button:hover > span:before添加到您的CSS。

Jsfiddle

button:hover, 
button:hover > span, 
/* New selector */ 
button:hover > span:before { 
     background:green; 
     color:white 
    }

來源

2015-11-12 07:34:36 Alex

這種風格添加到您的CSS

button:hover .full-circle:before { 
    background-color: green; 
}

來源

2015-11-12 07:41:06

添加這個CSS樣式。

button:hover .full-circle:before{ 
    background: green; 
}

來源

2015-11-12 07:42:30 magreenberg

目標：懸停之前

回答

相關問題