悬停

Question

我正在尝试重现我前几天在另一个网站上看到的效果。有一个标题，当您将鼠标悬停在标题上时，文本和屏幕上会出现一条水平线。然而，当我将鼠标悬停在线条被隐藏的地方时（我不应该这样），我差不多完成了。

我已经尝试了div的位置和宽度但没有成功（我不能在不改变线条宽度的情况下改变div的宽度）。

HTML：

<div id="index_wrapper">
    <p class="heading">THIS IS A TEST</p>
</div>

CSS：

#index_wrapper {
    margin-top: 100px;
    text-align: center;
    font-size: 30px;
}
.heading { 
    line-height:0.1em;
} 
.heading.active { 
    border-bottom: 1px solid #000;
} 

JQUERY：

$(document).ready(function(){
    $(".heading").hover(function(){
        $(".heading").toggleClass("active");
    });
});

JSFIDDLE：https://jsfiddle.net/5bhgsxv2/

Answer 1

您需要添加一个范围才能捕获文本

上的悬停事件

<div id="index_wrapper">
     <p class="heading"><span>THIS IS A TEST</span></p>
</div>

$(document).ready(function(){
  $(".heading span").hover(function(){
    $(".heading").toggleClass("active");
  });
});

或者如果增加的跨度对您来说很重要，您可以使用这样的css设置：

.heading { 
  line-height:0.1em;
  height: 0;
} 

.heading.active::before {
  display: block;
  content: '';
  border-bottom: 1px solid #000;
} 

Answer 2

你可以纯粹通过css

来做到这一点

.heading:hover { 
   text-decoration: line-through;
}