在悬停CSS上添加左边框仅限边框

问题描述：

我试图让一个元素在悬停时显示左边框。目前，我有它设置为使用上边框作为分配器和右，下和左边框设置为0在悬停CSS上添加左边框仅限边框

.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以上，但悬停时不应该不同吗？任何帮助赞赏。

1）。你没有为你的'border'规则指定单位（比如'px'）。 2）你有**方式**太多了！重要的东西在那里。 – Adam 2014-10-17 22:56:26

我可以理解css中的'！important'，尤其是如果试图使用顽固的WordPress主题，或者基础CSS过于复杂。 '！important'或（不重要）以某种方式转化为CSS中的“这非常重要”。如果更多的人将他们的WordPress主题变得更加友好，那么这不是必需的。 – 2014-10-17 23:07:08

答

这是你的整体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。

谢谢。这有助于，但它仍然显示原始项目的右侧，左侧和底部边界。 – Axioen 2014-10-17 23:07:56

@Fahad - 你不再需要使用jsFiddle来处理这些东西，因为你现在可以直接在SO中嵌入可运行的代码 - 沙盒和全部。 – 2014-10-17 23:08:10

@Axioen它不应该显示右边界，左边界和下边界，因为我们只是在CSS内声明'border-top'。你也可以看到jsFiddle，它只显示'border-top'。您是否使用了我在上面的答案中编写的确切CSS？ – 2014-10-17 23:10:27

答

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

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

答

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

<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>

在悬停CSS上添加左边框仅限边框

相关推荐