当您:悬停图像时,我需要显示图像的发光背景。但是我不确定是否可以,或者我的选择器不正确。

                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>

最佳答案

这是你想要的?

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

10-05 21:03
查看更多