Question

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

在其兄弟<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 solid #fff;}

标签img：悬停{border：2px solid＃333;}

标签和图像不会与边框半径和边框一起悬停

2 个答案: