CSS и HTML: Как поместить изображение (например, X/check) внутри флажка, когда вы его наводите

Question

Добрый день, я действительно хочу поиграть в то же время узнать о html и css. Поэтому я хотел бы спросить, можно ли поставить изображение в флажке, когда он будет парить? да просто зависает, не нажимайте. например, я хочу поставить некоторую проверку с непрозрачностью .5 в флажке, когда она зависает, указывая, что эта проверка появится, когда вы щелкаете ее, спасибо. якобы это мой флажок здесь:

<div class="checkbox"> 
     <label><input type="checkbox" value="" />Example</label> 
    </div> 

Answer 1

Вы не должны использовать изображения, можно сделать с помощью CSS, используя :before и :after с :hover

Смотрите пример:

body { 
 
    background: #eeeeee; 
 
    color: #000000; 
 
    border: 0; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 100%; 
 
    word-wrap: break-word; 
 
    z-index: 0; 
 
    font: 14px/1.5em sans-serif; 
 
    text-align: justify; 
 
} 
 
.box { 
 
    background: #555; 
 
    color: #ffffff; 
 
    width: 250px; 
 
    padding: 10px; 
 
} 
 
p { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
} 
 
input[type="checkbox"] { 
 
    display: none; 
 
} 
 
label { 
 
    cursor: pointer; 
 
} 
 
input[type="checkbox"] + label:before { 
 
    border: 1px solid #ffffff; 
 
    content: "\00a0"; 
 
    display: inline-block; 
 
    font: 16px/1em sans-serif; 
 
    height: 16px; 
 
    margin: 0 .25em 0 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
    width: 16px; 
 
} 
 
input[type="checkbox"] + label:hover:before { 
 
    background: #fff; 
 
    color: #666; 
 
    content: "\2713"; 
 
    text-align: center; 
 
} 
 
input[type="checkbox"]:checked + label:before { 
 
    background: #fff; 
 
    color: #666; 
 
    content: "\2713"; 
 
    text-align: center; 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    font-weight: bold; 
 
}

<div class="content"> 
 
    <div class="box"> 
 
    <p> 
 
     <input type="checkbox" id="c1" name="cb"> 
 
     <label for="c1">Checkbox</label> 
 
    </p> 
 
    </div> 
 
</div>