这是我遇到的问题-https://www.awesomescreenshot.com/video/512540?key=604f2d2682f6ef8061da033e213eaa58
我希望hover
边框在选择其中一个选项时都消失,所以不会出现双边框。到目前为止,我已经尝试过将css和jquery混合使用,但是我仍然似乎无法获得所需的样式。
这是我的DOM:
<div class="swatch clearfix" data-option-index="0">
<div class="header">Size</div>
<div data-value="Small" class="swatch-element small available">
<input id="swatch-0-small" type="radio" name="option-0" value="Small" checked="">
<label for="swatch-0-small">
Small
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .small').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Medium" class="swatch-element medium available">
<input id="swatch-0-medium" type="radio" name="option-0" value="Medium">
<label for="swatch-0-medium">
Medium
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .medium').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Large" class="swatch-element large available">
<input id="swatch-0-large" type="radio" name="option-0" value="Large">
<label for="swatch-0-large">
Large
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .large').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
这是我当前使用的CSS:
.swatch-element {
border: solid 2px #a1a1a1;
}
.swatch-element:hover {
border-color: #000;
}
.swatch input:checked + label {
border: solid #000 2px;
}
答案 0 :(得分:1)
您可以将所有边框应用于label
,因此不会出现双边框,而只是更改了边框:
.swatch-element label {
border: solid 2px #a1a1a1;
}
.swatch-element:hover label {
border-color: #000;
}
.swatch-element input:checked + label {
border: solid #000 2px;
}