復選框標簽圖片：懸停了嗎？

Question

我需要一個發光的背景，當您：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>

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

如果是這樣，則最好使用以下選擇器：

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

JSBin演示＃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);
    }