懸停與複選框破解

我試圖做一個盒子，當按下按鈕時，文本只顯示「保留」，因爲它現在顯示「可用空間！保留」，因爲我已經使用：after函數。有沒有什麼辦法可以創建一個懸停功能，當箱子變成綠色時，它顯示「點擊這裏預約」，懸停在「我的」，而箱子是紅色的？懸停與複選框破解

的代碼是jsFiddle及以下：

<input type="checkbox" id="btnControl"/> 
<label class="mouseover1" for="btnControl">Free Space</label> 

.mouseover1 { 

background-color: green; 
color: white; 
display: inline-block; 
padding: 5% ; 
text-align: center; 
width: 20%; 
} 

#btnControl { 
display: none; 
} 

.mouseover1:active { 
margin-left: 2px; 
box-shadow: 0px 0px 1px #000; 
outline: 1px solid black; 
} 

.mouseover1:hover { 
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb); 
color:black; 
} 

#btnControl:checked + label:after { 
content: 'Reserved!'; 
} 

input[type=checkbox]:checked ~ .mouseover1 { 
background-color: red; 
}

來源

2016-03-02 Nayshal Kerai

哪裏會懸停文本顯示？ – Turnip

我沒有使用:before顯示/添加隱藏原文。

single button jsfiddle

multiple buttons jsfiddle

body { 
 
    max-width:100%; 
 
    max-height:100vh; 
 
    font-family: arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
label { 
 
    position:absolute; 
 
    right:0; 
 
    left:0; 
 
    margin:auto; 
 
} 
 

 
.mouseover1 {  
 
    background-color: yellowgreen; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 5% ; 
 
    text-align: center; 
 
    width: 20%; 
 
} 
 

 
#btnControl { 
 
    display: none; 
 
} 
 

 
.mouseover1:active { 
 
    box-shadow: 0px 0px 1px #000; 
 
    outline: 2px solid darkred; 
 
} 
 

 
.mouseover1:hover { 
 
    background: yellowgreen; 
 
    color: white; 
 
} 
 

 
#btnControl:checked + label:after { 
 
    content: 'Reserved'; 
 
} 
 

 
#btnControl + label:before { 
 
    content: 'Free Space'; 
 
} 
 

 
#btnControl:checked + label:before { 
 
    content: ''; 
 
} 
 

 
#btnControl:checked:hover + label:after { 
 
    content: 'Mine!'; 
 
} 
 

 
#btnControl:hover + label:before { 
 
    content: 'Click here!'; 
 
} 
 

 
#btnControl:checked:hover + label:before { 
 
    content: ''; 
 
} 
 

 
input[type=checkbox]:checked + .mouseover1 { 
 
\t background-color: tomato; 
 
}

<input type="checkbox" id="btnControl"/> 
 
<label class="mouseover1" for="btnControl"></label>

來源

2016-03-02 14:05:08

你是天才！我的上帝，這非常感謝你！有沒有辦法讓多個用戶只能點擊一個？ –

[**多個按鈕jsfiddle **]（https://jsfiddle.net/ghdbc704/） - 我爲'.css目標'取代了'#btnControl css target'。 Plus改變了'input [type = checkbox]：checked〜.mouseover1'（它到達後面的所有對象）'input [type = checkbox]選擇器：checked + .mouseover1'（只到達下一個對象）。當然，由於ID和標籤目標必須是唯一的，因此也進行了修改。 –

啊啊謝謝多數民衆贊成我所做的，但無法弄清楚如何只選擇其中一個按鈕？ –

你可以使用字體大小：

.mouseover1 { 
 
    
 
    background-color: green; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 5% ; 
 
    text-align: center; 
 
    width: 20%; 
 
} 
 

 
#btnControl { 
 
    display: none; 
 
} 
 

 
.mouseover1:active { 
 
    margin-left: 2px; 
 
    box-shadow: 0px 0px 1px #000; 
 
    outline: 1px solid black; 
 
} 
 

 
.mouseover1:hover { 
 
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb); 
 
    color:black; 
 
} 
 
#btnControl:checked + label { 
 
    font-size:0; 
 
} 
 
#btnControl:checked + label:after { 
 
    content: 'Reserved!'; 
 
    font-size:1rem; 
 
} 
 

 
input[type=checkbox]:checked ~ .mouseover1 { 
 
\t background-color: red; 
 
}

<input type="checkbox" id="btnControl"/> 
 
<label class="mouseover1" for="btnControl">Free Space</label>

或浮動和TEXT-INDENT

.mouseover1 { 
 
     background-color: green; 
 
     color: white; 
 
     display: inline-block; 
 
     padding: 5%; 
 
     text-align: center; 
 
     width: 20%; 
 
    } 
 
    #btnControl { 
 
     display: none; 
 
    } 
 
    .mouseover1:active { 
 
     margin-left: 2px; 
 
     box-shadow: 0px 0px 1px #000; 
 
     outline: 1px solid black; 
 
    } 
 
    .mouseover1:hover { 
 
     background-image: linear-gradient(to bottom, #c3e3fa, #a5defb); 
 
     color: black; 
 
    } 
 
    #btnControl:checked + label { 
 
     text-indent: -999px; 
 
     ; 
 
    } 
 
    #btnControl:checked + label:after { 
 
     content: 'Reserved!'; 
 
     float: left; 
 
     width: 100%; 
 
     text-indent: 0; 
 
    } 
 
    input[type=checkbox]:checked ~ .mouseover1 { 
 
     background-color: red; 
 
    }

<input type="checkbox" id="btnControl" /> 
 
<label class="mouseover1" for="btnControl">Free Space</label>

或其他您認爲相關的方法。最好是JavaScript來改變文字。

來源

2016-03-02 14:00:29

將文本包裝在span中可讓您輕鬆隱藏。懸停文字（「點擊這裏預約/礦」），可以用另一個僞元素

.mouseover1 { 
 
    
 
    background-color: green; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 5% ; 
 
    text-align: center; 
 
    width: 20%; 
 
} 
 

 
#btnControl { 
 
    display: none; 
 
} 
 

 
.mouseover1:active { 
 
    margin-left: 2px; 
 
    box-shadow: 0px 0px 1px #000; 
 
    outline: 1px solid black; 
 
} 
 

 
.mouseover1:hover { 
 
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb); 
 
    color:black; 
 
} 
 

 
label { 
 
    position: relative; 
 
} 
 

 
#btnControl:checked + label:after { 
 
    content: 'Reserved!'; 
 
} 
 

 
#btnControl:checked + label span { 
 
    display: none; 
 
} 
 

 
#btnControl + label:before { 
 
    content: 'Click here to reserve'; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0,0,0,.8); 
 
    color: #fff; 
 
    opacity: 0; 
 
    transition: all .2s ease; 
 
} 
 

 
#btnControl + label:hover:before { 
 
    opacity: 1; 
 
} 
 

 
#btnControl:checked + label:before { 
 
    content: 'Mine!'; 
 
} 
 

 
input[type=checkbox]:checked ~ .mouseover1 { 
 
\t background-color: red; 
 
}

<input type="checkbox" id="btnControl"/> 
 
<label class="mouseover1" for="btnControl"><span>Free Space</span></label>

來源

2016-03-02 14:04:46 Turnip

要改變標籤內的文本，先在一個div包裹它

<input type="checkbox" id="btnControl"/> 
<div class="container"> 
    <label class="mouseover1 new-label" for="btnControl"><Span>Free Space</Span></label> 
</div>

確保添加了「新的標籤」的標籤類然後更改CSS如下：

.mouseover1 { 

    background-color: green; 
    color: white; 
    display: inline-block; 
    padding: 5% ; 
    text-align: center; 
    width: 20%; 
} 

#btnControl { 
    display: none; 
} 

.mouseover1:active { 
    margin-left: 2px; 
    box-shadow: 0px 0px 1px #000; 
    outline: 1px solid black; 
} 

.mouseover1:hover { 
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb); 
    color:black; 
} 

#btnControl:checked + label:after { 
    content: 'Reserved!'; 
} 

input[type=checkbox]:checked ~ .mouseover1 { 
    background-color: red; 
} 
.container:hover .new-label span{ 
    display: none; 
} 
.container:hover .new-label:after{ 
    content: 'Click Here To Reserve'; 
}

來源

2016-03-02 14:10:59 Kramb

只需添加跨度爲文本，並添加類。

CSS

#btnControl:checked + .mouseover1 span { 
    display: none; 
}

在這裏你去：jsFiddle

來源

2016-03-02 14:12:42 DearBee

懸停與複選框破解

回答

相關問題