Question

我正在尝试让一个元素悬停在它上面时显示左边框。目前我设置为使用顶部边框作为分隔线，右边，底部和左边框设置为0.

.post.reply {
        font-family: 'Arial', sans-serif !important;
        font-size: 8pt !important;
        background: #fafafa !important;
        color: #1a1a1a !important;
        width: 100% !important;
        border-bottom: 0 !important;
        border-top: 3 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-color: #cecece !important;
    }

这是悬停

.post.reply:hover {
        box-shadow: #444 0 0 0px !important;
        border-left: 4px !important;
    }

其他内容在悬停部分工作正常，但边框拒绝显示。我几乎可以肯定它是因为我将它设置为0，但悬停时不应该有所不同吗？任何帮助表示赞赏。

Answer 1

这就是你的整体CSS应该如何，它将完美地运作：

.post.reply {
        font-family: 'Arial', sans-serif !important;
        font-size: 8pt !important;
        background: #fafafa !important;
        color: #1a1a1a !important;
        width: 100% !important;
        border-top: 3px solid #cecece !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
}

.post.reply:hover {
        box-shadow: #444 0 0 0px !important;
        border-left: 4px solid #cecece !important;
}

我还创建了一个快速 jsFiddle 供您查看。此外，如果您真的不需要，则应删除所有!important。

Answer 2

我的朋友非常简单;你在选择器和悬停状态声明它！

#selectorID.reply:hover {
    border-left:solid 4px #ff0000 !important;
}

Answer 3

＆＃13;

.post.reply {
  font-family: 'Arial', sans-serif !important;
  font-size: 8pt !important;
  background: #fafafa !important;
  color: #1a1a1a !important;
  width: 100% !important;
  border-style: solid;
  border-width: 3px 0px 0px 0px !important;
  border-color: #cecece !important;
}
.post.reply:hover {
  box-shadow: #444 0 0 0px !important;
  border-width: 0px 0px 0px 4px !important;
}
/* for demo only */

html,
body {
  margin: 0px;
  background: #327642;
}
.post {
  height: 100px;
  padding: 5px;
  margin-bottom: 5px;
}

＆＃13;

<div class="post reply">
  Foo Bar
</div>
<div class="post reply">
  Foo Bar
</div>
<div class="post reply">
  Foo Bar
</div>
<div class="post reply">
  Foo Bar
</div>
<div class="post reply">
  Foo Bar
</div>
<div class="post reply">
  Foo Bar
</div>

＆＃13;

在悬停CSS上添加仅左边框

3 个答案: