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