如何在跳转链接博客功能上制作悬停效果?

时间:2014-08-09 11:24:44

标签: css blogger

美好的一天给你:) 首先,我在博客上添加了对跳转链接功能的css悬停效果,但它没有工作

这是我的css:

.jump-link a {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.jump-link a::before {
    position: absolute;
    top: 100%;
    left: 50%;
    color: transparent;
    content: '\2022';
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
    -moz-transition: text-shadow 0.3s, color 0.3s;
    transition: text-shadow 0.3s, color 0.3s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}

.jump-link a:hover::before,
.jump-link a:focus::before {
    color: #fff;
    text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.jump-link a:hover,
.jump-link a:focus {
    color: #ba7700;
} 

我会感谢任何帮助。 :)

1 个答案:

答案 0 :(得分:0)

.jump-link a:hover{color:red;text-decoration:underline;}

另请勿在{{1​​}}

中使用两个::

例如,当用户悬停任何链接时,下面的代码将添加“+”。

.jump-link a:hover::before