Question

这是我遇到的问题-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;
}

Answer 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;
}

CSS悬停/边框问题

1 个答案: