Question

我有一个带有悬停状态的网格列表。我需要它，所以它只是添加边框。目前，如果您将鼠标悬停在每一个上，li /选项会稍微移动并导致其他项目移位。请参阅下面的标记：

HTML：

<div id="question13" class="question-options">
<h3 class="semi-bold">Header</h3>
<fieldset class="radio">
<ul>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 1</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 2</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 3</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 4</label><span class="hide-text"></span>
</li>
</ul>
</fieldset>
</div>

SCSS：

.question-options {
  border: 1px solid gray;
  padding: 20px;
  ul {
      display: grid;
      display: -ms-grid;
        grid-template-columns: repeat(2,auto);
      li {
        padding-bottom: 1rem;
        margin: 0.5rem;
        position: relative;
      }
  }
}

.border-blue {
  vertical-align: middle;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    padding: 10px;
    border: 2px solid blue;
  }
}

活小提琴：https://jsfiddle.net/c736cg6h/1/

目前，如果将鼠标悬停在每个项目上，您会看到项目“移动”并影响其他项目 - 我需要弄清楚如何保留它以便它只添加边框而不会影响每个项目的定位项目。我尝试将相同的填充添加到悬停状态并将其删除，但两者似乎都使情况变得更糟。

这是由网格显示引起的吗？如何在悬停状态下添加边框而不会影响定位？

Answer 1

使用border: 2px solid transparent;

.question-options {
    border: 1px solid gray;
    padding: 20px;
}
ul {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(2, auto);
}
li {
    padding-bottom: 1rem;
    margin: 0.5rem;
    position: relative;
}

.border-blue {
    vertical-align: middle;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid transparent;
}
.border-blue:hover {
     padding: 10px;
     border: 2px solid blue;
}

<div id="question13" class="question-options">
    <h3 class="semi-bold">Header</h3>
    <fieldset class="radio">
        <ul>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 1</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 2</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 3</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 4</label><span class="hide-text"></span>
            </li>
        </ul>
    </fieldset>
</div>

Answer 2

您可以通过向常规（非悬停）状态添加相同的边框但是透明来避免这种情况

.border-blue {
  [...]
  border: 2px solid transparent;
  [...]
}

https://jsfiddle.net/kgryvuco/1/

Answer 3

将透明border设置为初始状态。然后在border时为:hover着色。

li {
    padding-bottom: 1rem;
    margin: 0.5rem;
    position: relative;
    border: 2px solid transparent;

    &:hover {
       padding: 10px;
       border-color: blue;
    }
}

.question-options {
  border: 1px solid gray;
  padding: 20px;
}

ul {
      display: grid;
      display: -ms-grid;
    	grid-template-columns: repeat(2,auto);
  }
  
ul li {
        padding-bottom: 1rem;
        margin: 0.5rem;
        position: relative;
        border: 2px solid transparent;
}

.border-blue {
  vertical-align: middle;
  padding: 10px;
  border-radius: 5px;
}

.border-blue:hover {
    padding: 10px;
    border-color: blue;
  }

<div id="question13" class="question-options">
<h3 class="semi-bold">Header</h3>
<fieldset class="radio">
<ul>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 1</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 2</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 3</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 4</label><span class="hide-text"></span>
</li>
</ul>
</fieldset>
</div>

Answer 4

将悬停填充更改为8px，边框会添加2px，因此您将获得10px而不是12px

Answer 5

如果您将margin尺寸减少相同的数量，那么您将增加总数div，那么您应该会感觉良好。您已将保证金设置为8px，因此请将其设置为6px而不是悬停。您也不需要在padding上设置hover。

由于这些答案中的某些答案是完全有效的答案，我认为我会解释一下。

最纯粹的CSS可能会回避使用border: 2px solid transparent;实现此目的。我不认为我们需要担心IE6无法处理透明边框，但通常不建议使用＆＃34; hack＆＃34;当你可以用另一种方式实现你想要的东西时，即使它只是IE6及以下，也不能很好地处理这个问题。再次，使用它取决于许多其他事情。

主要问题是border增加了元素的总大小。所以，你必须适应这一点。有不同的方法，这里的答案中提到的所有方法都是有效的。从历史上看，这样做的方法是减少padding或margin。

所有答案，包括透明边框，都是有效且良好的。同样，这一切都取决于如何使用一切。例如，如果有margin大小的SASS变量，您可以将其与-2或-[border width variable]一起使用，或将其包含在padding计算中。我倾向于这个，而不是透明的边界。

.border-blue {
  vertical-align: middle;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    border: 2px solid blue;
    margin: 6px;
  }
}

保持<li>悬停状态的位置一致

5 个答案: