CSS悬停样式仅在对象的边框上？

Posted 2023-03-05

技术标签:

【中文标题】CSS悬停样式仅在对象的边框上？【英文标题】：CSS hover styling on just the border of an object? 【发布时间】：2018-08-23 17:58:25 【问题描述】：

我在自定义我正在运行的 WordPress 主题附带的一些按钮小部件的 CSS 时遇到问题。我抓了一个关于正在发生的事情的快速屏幕截图视频，因为它很难描述。

视频链接：https://drive.google.com/open?id=1mYvOtAjz-0QnJYV3_nGYXnFoRpsRdVo_

我在按钮上应用的 CSS：

.lc_button 
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;


.lc_button:hover 
    background-color: white;
    border: 4px solid #dd3333 !important;
    color: #151515 !important;


.lc_button a:hover 
    color: #151515 !important;

知道无论光标在按钮内的哪个位置，我必须做什么才能让内部保持可见吗？

谢谢

【问题讨论】：

如果视频准确地显示了您所面临的情况，那么由于褪色效果，我怀疑这不仅仅是您发布的 css。你能提供html吗？请也分享您的 html 文件我在代码片段中附加了两个答案...检查它并更新我... 你得到答案了吗 【参考方案1】：

您提供的 .css 似乎功能齐全且可自定义。（又名，没有损坏，工作正常）。

整个 .css 和 .html 可能会在没有任何“重大改动”的情况下阐明一些事情。

.lc_button 
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;

.lc_button:hover 
    background-color: white;
    border: 4px solid #0000ff !important;
    color: #00ff00 !important;

.lc_button a:hover 
    color: #151515 !important;

<body>
    <button class="lc_button">Test</button>
</body>

【讨论】：

【参考方案2】：

我已尝试解决您的问题。我成功了。你可以使用我的这个代码。

HTML

<div class="lc_button">
    <a href="#">Watch video</a>
</div>

CSS

    .lc_button a 
        display: block;
        width: 200px;
        height: 100px;
        line-height: 100px;
        font-size: 18px;
        font-weight: 700;
        color: #000000;
        border-radius: 5%;
        box-sizing: border-box;
        transition: 0.3s;
        background-color: white;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        position: relative;
    
    .lc_button a:before 
        display: block;
        position: absolute;
        border-radius: 5%;
        left: 0;
        top: 0;
        content: "";
        width: 200px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid red;
        transition: 0.3s;
    
    .lc_button a:hover:before 
        border: 4px solid red;
    
    .lc_button a:hover 
        color: #151515 !important;
        background-color: #ffffff;

.lc_button a 
		    display: block;
		    width: 200px;
		    height: 100px;
		    line-height: 100px;
		    font-size: 18px;
		    font-weight: 700;
		    color: #000000;
		    border-radius: 5%;
		    box-sizing: border-box;
		    transition: 0.3s;
		    background-color: white;
		    text-decoration: none;
		    text-transform: uppercase;
		    text-align: center;
		    position: relative;
		
		.lc_button a:before 
			display: block;
			position: absolute;
			border-radius: 5%;
			left: 0;
			top: 0;
			content: "";
			width: 200px;
			height: 100px;
			box-sizing: border-box;
			border: 1px solid red;
			transition: 0.3s;
		
		.lc_button a:hover:before 
		  	border: 4px solid red;
		
		.lc_button a:hover 
		    color: #151515 !important;
		    background-color: #ffffff;

<div class="lc_button">
    <a href="#">Watch video</a>
  </div>

【讨论】：

【参考方案3】：

这将帮助您解决问题...

button 
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;


button:hover 
    background-color: white;
    border: 4px solid #dd3333 !important;
    color: #151515 !important;


button a:hover 
    color: #151515 !important;

<div class="container">
  <button class="lc_button"><span>Hover Me</span></button>
  </div>

【讨论】：

【参考方案4】：

我已经分享了代码 sn-p..我认为这将帮助您解决问题...

*, *:after, *:before 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

body
  font-family: 'PT Sans', sans-serif;
  display: table;
  width: 100%;
  background: #f54785;

.container
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100vh;

button
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 20px 30px;
  background: rgba(0,0,0,0.09);

span
  display: block;
  padding: 25px 80px;

button::before, button::after
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;


span::before, span::after
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;

button:hover::before, button:hover::after
  width: 100%;

button:hover span::before, button:hover span::after
  height: 100%;

.btn-1::after
  left:0;
  bottom: 0;
  transition-duration: 0.4s;

.btn-1 span::after
  right:0;
  top: 0;
  transition-duration: 0.4s;

.btn-1::before
  right: 0;
  top: 0;
  transition-duration: 0.4s;

.btn-1 span::before
  left: 0;
  bottom: 0;
  transition-duration: 0.4s;

<div class="container">
  <button class="btn-1"><span>Hover Me</span></button>
  </div>

【讨论】：

以上是关于CSS悬停样式仅在对象的边框上？的主要内容，如果未能解决你的问题，请参考以下文章