Question

当我将鼠标悬停在我的复选框范围内时，我试图找到一种方法来更改背景图像（由于firefox问题，我不得不以这种方式构建它）。

每当我添加一个：悬停状态时它只是忽略它？

我创建了当前代码的副本：https://jsfiddle.net/vf21xxba/

每个div都会有一个不同的id图标，而且悬停时图像也会不同。

label.checkbox input[type="checkbox"] {     display:none; }

label.checkbox span{    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;   display:inline-block;   border-radius: 100px;   transition: all 0.5s;   cursor: pointer;    width: 75px;    height: 75px;   background:#262626;  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;            }

label.checkbox span#pa {    background-image: url('../img/icons/party-animal.png'); }

label.checkbox :checked + span#pa {   background-color: #ea2e49; }


<label class="checkbox"><input type="checkbox" value=".pa" id="pa" class="initPa"><span id="pa"></span></label>

所以就像'检查'状态一样，我需要为每个跨度添加悬停状态，并使用不同背景图像的ID。

Answer 1

离开+ out

https://jsfiddle.net/vf21xxba/3/

label.checkbox :checked + span#pa, label.checkbox:hover span#pa {
  background-color: #ea2e49;
  background-image: url('http://icons.iconarchive.com/icons/zerode/plump/128/Search-icon.png'); 
}

在复选框跨度上悬停背景图像更改

1 个答案: