复选框标签图像：悬停？

当你：悬停图像时，我需要一个发光的背景来显示图像。但我不确定你是否可以或我的选择器是不正确的..？复选框标签图像：悬停？

   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%一个transparancy，它是如何一个人能够选择标签的图像？

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

来源

2013-08-23 dan

发布您生成的HTML代替PHP代码。 –

完成' – dan

HTML123中的究竟在哪里？ – Adrift

这是你在找什么？

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

来源

2013-08-23 12:32:52

这很好用，我想我也错过了相对于标签的位置，谢谢。 – dan

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

.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-23 12:36:41

复选框标签图像：悬停？

回答

相关问题