Question

我正在使用rails表单，用户可以使用radiobutton选择类别。通过一些css，我设法通过添加图像和文本对radiobutton进行一些更改。我已设法对悬停产生影响。但是，一旦选择了悬停效果，我怎么能保持相同的悬停效果，以便人们知道他们选择的选项？

这就是我到目前为止所做的事情

**以下是** fiddle **

中的代码

HTML

        <div style="width:120px; float:left; text-align:center;", class="hvr-shutter-out-horizontal">
          <label for="category1">
            <input type="radio" name="category_type" id="category1" value="1">
            <img src="<%= asset_path('category1.png') %>" style="width: 60px;height: 60px;"/>
            <br/>
            <span>category1</span>
          </label>
        </div>

        <div style="width:120px; float:left; text-align:center;", class="hvr-shutter-out-horizontal">
          <label for="category2">
            <input type="radio" name="category_type" id="category2" value="2">
            <img src="<%= asset_path('category2.png') %>" style="width: 60px;height: 60px;"/>
            <br/>
            <span>category2</span>
          </label>
        </div>




      </fieldset>

CSS

label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}

/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2098d1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus,                       .hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before, 
.hvr-shutter-out-     horizontal:focus:before, 
.hvr-shutter-out-  horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

感谢您尝试提供帮助

Answer 1

您最好选择使用pseude-selector :checked，它适用于也选择作为属性input type="radio"的HTML元素。

您可以在此处找到所有内容：https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 2

我建议使用css伪选择器：已选中

这里是小提琴：http://jsfiddle.net/jy2z9nkw/5/

input:checked ~ img ~ br ~ span:before{
    background:#2098d1;
    position:absolute;
    top:0;
    content:'';
    left:0;
    top:0;
    bottom:0;
    display:block;
    width:100%;
    z-index:-1;
}

选择后保持css悬停效果

2 个答案: