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

【问题标题】：Changing the shape and color of an arrow inside a button upon hovering悬停时更改按钮内箭头的形状和颜色
【发布时间】：2014-04-30 01:29:07
【问题描述】：

我正在制作一个按钮，这里是demo。现在我被两个问题困住了，我不知道如何解决它们。

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

我还没有学过 javascript，所以我想知道 CSS 是否可以做到这一点？

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

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

提前致谢。

【问题讨论】：

标签： html css button hover icons

【解决方案1】：

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

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;
}

【讨论】：

谢谢，让我更清楚了，但是如何在使用此代码悬停时更改箭头？
悬停时它会改变箭头的颜色 (.language-icon:hover:before {/* 悬停样式 */})...还是你想改变另一个属性？
我想在悬停时更改箭头。现在，当您不悬停时，它有向下箭头。当你将鼠标悬停在它上面时，我想要一个向上的箭头。就像我发布的演示一样。
好的，我会调整答案。
使用向上箭头的边框样式的箭头看起来很糟糕。最好将 Unicode 字符用于向上和向下箭头。 cssdeck.com/labs/2qdxhokk

【解决方案2】：

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

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

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

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

希望对您有所帮助。

【讨论】：

我用你的代码更新了演示，现在箭头在悬停时会改变谢谢，但箭头的颜色仍然是黑色
更改“边框底部：4px纯黑色；”在“.language-icon:hover .arrow-up”到我上面发布的内容。