0

我需要在您 :hover 图像时显示的图像的发光背景。但是我不确定您是否可以或我的选择器不正确..？

                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>

4

2 回答 2

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 演示

如果是这样，最好改用这个选择器：

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

JSBin 演示 #2

于 2013-08-23T12:32:52.780 回答
0

你可以试试这个，它会正常工作。

.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);
    }
于 2013-08-23T12:36:41.503 回答