Question

我当前的代码会在链接的顶部和底部生成一个元素（黑条）。底部栏总是在那里，顶部栏就是在悬停时发生的。

我的代码工作正常，但只要光标与链接一致就会发生悬停效果（即使按钮只是文本，＆＃39;点击＆＃39;框似乎是屏幕宽度的100％）

if (isset($_POST['cert']))
{
    $cert_code= $_POST['cert'];
    // do something with $cert_code
}

HTML

#contact-btn a {
position: relative;
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-size: 3em;
letter-spacing: 1px;
font-weight: 400;
color: #4d4d4d;
}

#contact-btn a:after, #contact-btn a:before   { 
display: block;
position: absolute;
content: '';
margin: 0 auto;
background-color: #4d4d4d;
}

#contact-btn a:after { 
height: 2px; width: 100px;
bottom: -15px; left: 0; right: 0; 
}

#contact-btn a:before { 
height: 2px; width: 0;
top: -15px; left: 0; right: 0; 
}

#contact-btn:hover a:after, #contact-btn:hover a:before { width: 175px; height: 2px; }

Answer 1

你没有为contact-btn div本身设置任何样式。试试这个

#contact-btn {
   display: inline-block;
   position: relative; 
}

css悬停效果发生在按钮之外

1 个答案: