标签和图像未与边界半径和边界悬停

Question

的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%;
}

将鼠标悬停在图像上或单击并出现勾号后，试图显示带有边框颜色的边框半径。 具有边框颜色的border-radius似乎无法用于图像？ 因为我在本地尝试了带有背景图像的标签，所以它起作用了。 但是，即使绝对定位，在标签上使用背景图像也会导致刻度线位置错误。

帮助表示赞赏。

Answer 1

在同级<label>之前使用<input> <label> 。

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中没有用于选择所有同级元素的标准规范。

Answer 2

试试这个。

标签img {border：2px固体#fff;}

标签img：hover {border：2px实心＃333;}