Question

我正在使用按钮，这里是demo。现在我遇到两个问题，我无法弄清楚如何解决它们。

第一个问题：在演示中，您可以在右侧看到一个向下箭头图标。当您将鼠标悬停在按钮上时，它应该显示向上箭头图标，但您可以看到两个箭头，我只想在悬停时显示其中一个箭头。

我还没有学过javascript，所以我想知道这是否可以用CSS？

第二个问题：您还可以看到我在悬停时添加了红色，但箭头在悬停时不会改变颜色。如果将鼠标悬停在箭头上，箭头只会改变颜色

有什么方法可以让我的文字和箭头在悬停时同时改变颜色？

提前致谢。

Answer 1

1）你需要告诉向下箭头在悬停时隐藏。

.language-icon:hover .arrow-down { display: none; }

2）你告诉悬停的箭头是黑色的。你需要告诉它是一种不同的颜色。

.language-icon:hover .arrow-up { border-bottom: 5px solid #d13030; }

希望有所帮助。

Answer 2

这可以通过更简单的方式完成。不需要额外的跨度。

http://cssdeck.com/labs/cy1u4oeu

 <a class="language-icon fr" href="#" alt="choose-your-language">Language</a>

.language-icon {
color:#000;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
}

.fr {
  background: url(http://www.aventuredusucre.com/images/iconFrenchLanguage.gif) no-repeat;
}

.language-icon:hover {
color:#d13030;
}

.language-icon:before {
content:'';
width:0;
height:0;
position:absolute;
right:5px;
top:40%;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:4px solid #000;
}

.language-icon:hover:before {
border-top: none;
border-bottom:4px solid #d13030;
}

在悬停时更改按钮内箭头的形状和颜色

2 个答案: