标签和图像不与边框半径和边框悬停答案

【问题标题】：Label and Image not hovering with border-radius and border标签和图像不与边框半径和边框悬停
【发布时间】：2014-06-19 07:18:15
【问题描述】：

Jsfiddle

HTML

<label for="home" class="prof">
<img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" />
</label>
<input type="radio" name="type" value="home" id="home">
<label for="home" class="type">House Owner</label>

CSS

.image-label{
  width: 168px;
  height: 168px;
  border-radius: 100%;
}

input[type="radio"]:not(:checked),
input[type="radio"]:checked {
  visibility: hidden;
}

label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    float: left;
    text-align: center;
    width: 200px;
}

input[type=radio] + .prof img:hover {
    border: 15px solid red;
    border-radius: 100%;
}
input[type=radio]:checked + .prof img {
    border: 15px solid red;
    border-radius: 100%;
}
input[type=radio]:checked + .prof img:hover {
    border: 15px solid red;
    border-radius: 100%;
}

试图在悬停图像时或单击并出现勾号后出现带有边框颜色的边框半径。带有边框颜色的边框半径似乎无法用于图像？因为我已经尝试在本地使用带有背景图像的标签并且它有效。然而，在标签上使用背景图像会导致刻度错误定位，尽管绝对定位。

帮助表示赞赏。

【问题讨论】：

最后一个属性块是没有用的，因为它得到的属性与输入是单选和图像悬停时相同。

标签： css

【解决方案1】：

在其兄弟<label>之前使用<input>。

http://jsfiddle.net/W4XTj/1/

<input type="radio" name="type" value="home" id="home">  

<label for="home" class="prof">
  <img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" />
</label>

<label for="home" class="type">House Owner</label>

仅供参考，+ 选择器选择它之后的兄弟元素。

input[type=radio] + .prof

这将选择具有class="prof" 并且在<input tpe="radio"> 之后（而不是之前）的兄弟元素

CSS3 中没有标准规范，这太糟糕了选择所有同级元素。

【讨论】：

【解决方案2】：

试试这个。

label img{border:2px solid #fff;}

label img:hover {border:2px solid #333;}

【讨论】：