Question

当您将鼠标悬停在图像上时，我需要一个发光的背景图像。但我不确定你是否可以或我的选择器不正确..？

                else {
                    $label = '<label>';
                    $label2 = '</label>';
                    $check = '<input class="check" type="checkbox" name="checkbox[]" value="'.$value.'">';
                    $value1 = $value;
                }

                echo $label.$check.$cards[$value1].$label2;
            }

这就是我的标签显示卡片图像的方式，它完美地完成并在卡片下面显示一个复选框。以及可点击的卡片。

.check {
    position: absolute;
    margin-left: 50px;
    margin-top: 215px;
}

    .check img:hover {  
        box-shadow: 0px 0px 10px rgba(0,200,0,0.8);
    }

但我似乎无法使用选择器来定位图像，产生这种外部发光效果，或者更优选地在图像上覆盖绿色图像，其透明度约为30%，它是如何能够的选择标签的图像？

<label><input class="check" type="checkbox" name="checkbox[]" value="'.$value.'"></label>

Answer 1

这是你在找什么？

<强> HTML：

<label>
  <input type="checkbox" class="check">
  <img src="http://placehold.it/115x200" alt="">
</label>

<强> CSS：

label { position: relative; }

.check {
  position: absolute;
  margin-left: 50px;
  margin-top: 215px;
}

.check:hover + img {  
  box-shadow: 0px 0px 10px rgba(0,200,0,0.8);
}

<强> JSBin Demo

如果是这样，最好使用此选择器：

label:hover img {  
  box-shadow: 0px 0px 10px rgba(0,200,0,0.8);
}

<强> JSBin Demo #2

Answer 2

你可以尝试这样做会很精细。

.check {
  position: absolute;
  margin-left: 50px;
  margin-top: 215px;
}

.check:hover ~ img {  
  box-shadow: 0px 0px 10px rgba(0,200,0,0.8);
}

如果html是

<label>
  <input type="checkbox" class="check">
  <img src="http://placehold.it/115x200" alt="">
</label>

如果图像在输入框中，您可以尝试。

.check {
      position: absolute;
      margin-left: 50px;
      margin-top: 215px;
    }

    .check:hover img {  
      box-shadow: 0px 0px 10px rgba(0,200,0,0.8);
    }

复选框标签图片：悬停？

2 个答案: