我试图制作一个具有多种效果的按钮,其中之一是在悬停时更改按钮中文本的颜色。我如何确保将鼠标悬停在一个文本元素上时,这些按钮会全部以白色突出显示?还有第二个小问题,为什么从背景渐变到另一个背景渐变的平滑过渡不起作用?
.myButton {
transition: all 0.5s ease;
/* background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); */
border-radius:16px;
display:inline-block;
cursor:pointer;
color: darkorange;
font-family:Arial;
font-size:100%;
font-weight:bold;
padding:0px 12px 0px 4px;
text-decoration:none;
text-indent: 6px;
background-image: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: -moz-linear-gradient(top,#ededed 5%, #dfdfdf 100%);
background-image: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
border:1px solid #dcdcdc;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
a.myButton:hover span#highlight {
color: white;
}
a.myButton span {
color: darkorange;
}
#highlight {
color: darkorange;
}
.myButton:hover {
color: white;
background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
/* background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
background-color:#6c7c7c; */
box-shadow: 1px 1px 20px 0px darkorange;
}
<a href="/" style="float:center; padding-bottom: 7px;" class="myButton">
<span id="highlight" class="fas fa-angle-right"> ++ </span>
<span id="highlight" style="padding-bottom: 7px;">CLICK ME!</span>
<span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span>
</a>
答案 0 :(得分:1)
尝试一下
a.myButton:hover span#highlight {
color: white;
}
代替
a.myButton span:hover #highlight {
color: white;
}
因为您将鼠标悬停在<a>
标记上以更改所有具有 id span
highlight
的颜色
.myButton {
transition: all 0.5s ease;
background-color:#768d87;
border-radius:16px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color: darkorange;
font-family:Arial;
font-size:100%;
font-weight:bold;
padding:0px 12px 0px 4px;
text-decoration:none;
text-indent: 6px;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
font-family: Verdana;
border: solid #gray 1px;
border:1px solid #dcdcdc;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
a.myButton:hover span#highlight {
color: white;
}
a.myButton span {
color: darkorange;
}
#highlight {
color: darkorange;
}
.myButton:hover {
color: white;
background:linear-gradient(to bottom, #ededed 5%, #006AFF 100%);
box-shadow: 1px 1px 20px 0px darkorange;
}
<a href="/" style="float:center; padding-bottom: 7px;" class="myButton"><span id="highlight" class="fas fa-angle-right"> ++ </span> <span id="highlight"style="padding-bottom: 7px;">CLICK ME!</span>
<span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span></a>