时间戳

首页 > 解决方案 > 我希望链接在鼠标悬停时响应，而不是在空白处

css - 我希望链接在鼠标悬停时响应，而不是在空白处

问题描述

当我用填充分隔底部链接（音乐、联系人、存档）时，即使鼠标移到分隔它们的空白空间上，它们也会突出显示。我希望鼠标只对它悬停的链接做出反应并忽略空白区域，但是我不确定如何在这个平台上做到这一点。如果需要，我可以发布博客的完整代码。

/*header*/

header {
    width:{select:post width}px;
    margin:140px auto 0 auto;
    text-align:center;
    font-family: inconsolata;
    position:relative;
    -webkit-animation-name: none-in;
    -webkit-animation-duration: 2.5s;    
}

.ico {
    display:block;
    margin-bottom:35px;
}

.ico img { /*icon*/
    margin:0 auto;    
    width:60px;
    height:60px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
}

.about {
    position:relative;
    height:0px;
    overflow:hidden; 
}

.desc {
    padding:25px 0;
    opacity:0;
}

.dnav {margin-top:10px;
       margin-bottom: 110px;
}

.dnav a {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:lowercase;
    display:inline-block;
    
    
}

.dnav a:after {
    content:'';
    color:{color:link}!important;    
    padding-left:15px;
}

.dnav a:hover::after {color:{color:link}!important;}

.dnav a:last-of-type::after {display:none;}


nav {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:uppercase; 
}

nav a {margin:0 0px;}

#blogt {
    
    font-size: 11px;
    font-weight:bold;
        /*color:{color:title};*/ 
    
}
<body>

<header>
{block:ifIconImage}<a href="/" class="ico"><img src="{image:Icon}"></a>{/block:ifIconImage}
    <nav>{block:ifAskTitle}<a href="/ask">{text:ask title}</a>{/block:ifAskTitle}{block:ifProfileTitle}<a class="pro">{text:profile title}</a>{/block:ifProfileTitle}<a id="blogt" href="/">{Title}</a>{block:ifArchiveTitle}<a href="/archive">{text:archive title}</a>{/block:ifArchiveTitle}</nav>
    <div class="about"><div class="desc">{Description}</div></div>
    
    <div class="dnav">{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}</div>
    </div></div>
</header>

标签： csstumblr

解决方案

好吧，填充是元素的一部分，所以将鼠标悬停在它上面会触发 mouseOver 事件。

尝试改用边距。

推荐阅读