所以我想创建这个十六进制，当我将鼠标悬停在它上面时会出现白色文本，它确实如此，但仅在动画结束时。我想让它做的是，即使我将鼠标悬停在它上面，它也保持白色，解决方案？
正如你在上面看到的那样，我对十六进制做了什么，它通常是一张图片，在图片之后，两个框应该滑过它并显示一些标准文本，同时保留一个我有另一个用途的按钮。现在，当我将鼠标悬停在它上面时，就像我在介绍中所说的那样，文本变成黑色并且几乎不可读，而我在 css 代码中指定颜色应该是白色。是我做错了什么还是我忽略了什么？
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
}
.hex::after {
content: '';
display: block;
padding-bottom: 86.602%;
/* = 100 / tan(60) * 1.5 */
}
.hexIn {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
/* = width / sin(60) */
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
-ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
}
.hexLink {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
-ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.hex h1,
.hex p {
width: 100%;
padding: 5%;
box-sizing: border-box;
background-color: rgba(0, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
bottom: 50%;
padding-top: 50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
padding-bottom: 50%;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h1,
.hexLink:focus h1,
.hexLink:hover p,
.hexLink:focus p {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) {
/* <- 5-4 hexagons per row */
#hexGrid {
padding-bottom: 4.4%
}
.hex {
width: 20%;
/* = 100 / 5 */
}
.hex:nth-child(9n+6) {
/* first hexagon of even rows */
margin-left: 10%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 1200px) and (min-width:901px) {
/* <- 4-3 hexagons per row */
#hexGrid {
padding-bottom: 5.5%
}
.hex {
width: 25%;
/* = 100 / 4 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 900px) and (min-width:601px) {
/* <- 3-2 hexagons per row */
#hexGrid {
padding-bottom: 7.4%
}
.hex {
width: 33.333%;
/* = 100 / 3 */
}
.hex:nth-child(5n+4) {
/* first hexagon of even rows */
margin-left: 16.666%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 600px) {
/* <- 2-1 hexagons per row */
#hexGrid {
padding-bottom: 11.2%
}
.hex {
width: 50%;
/* = 100 / 3 */
}
.hex:nth-child(3n+3) {
/* first hexagon of even rows */
margin-left: 25%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
</ul>答案 0 :(得分：1)
我没有看到您尝试将颜色直接添加到元素本身的任何地方。我只能看到您已将颜色添加到其父元素中。
您是否尝试过简单地添加
color: white; 或 color: #fff;
直接到
.hex h1,
.hex p {
...
}
？？？
答案 1 :(得分：0)
您当前的代码：
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
摆弄您的代码段，我发现删除 color: inherit 可以解决问题，请参阅下面的演示。因此，这似乎覆盖了所需的 color: #fff。
如果您仍需要在页面中的其他锚标记上设置此属性，则可以保留该属性，只将 .hexLink 锚标记排除在外：
a:not(.hexLink),
a:not(.hexLink):hover,
a:not(.hexLink):focus,
a:not(.hexLink):active {
text-decoration: none;
color: inherit;
}
演示
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
}
.hex::after {
content: '';
display: block;
padding-bottom: 86.602%;
/* = 100 / tan(60) * 1.5 */
}
.hexIn {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
/* = width / sin(60) */
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
-ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
/* fix for jagged edges in FF on hover transition */
}
.hexLink {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
-ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.hex h1,
.hex p {
width: 100%;
padding: 5%;
box-sizing: border-box;
background-color: rgba(0, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
bottom: 50%;
padding-top: 50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
padding-bottom: 50%;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
a:not(.hexLink),
a:not(.hexLink):hover,
a:not(.hexLink):focus,
a:not(.hexLink):active {
text-decoration: none;
color: inherit;
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h1,
.hexLink:focus h1,
.hexLink:hover p,
.hexLink:focus p {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) {
/* <- 5-4 hexagons per row */
#hexGrid {
padding-bottom: 4.4%
}
.hex {
width: 20%;
/* = 100 / 5 */
}
.hex:nth-child(9n+6) {
/* first hexagon of even rows */
margin-left: 10%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 1200px) and (min-width:901px) {
/* <- 4-3 hexagons per row */
#hexGrid {
padding-bottom: 5.5%
}
.hex {
width: 25%;
/* = 100 / 4 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 900px) and (min-width:601px) {
/* <- 3-2 hexagons per row */
#hexGrid {
padding-bottom: 7.4%
}
.hex {
width: 33.333%;
/* = 100 / 3 */
}
.hex:nth-child(5n+4) {
/* first hexagon of even rows */
margin-left: 16.666%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 600px) {
/* <- 2-1 hexagons per row */
#hexGrid {
padding-bottom: 11.2%
}
.hex {
width: 50%;
/* = 100 / 3 */
}
.hex:nth-child(3n+3) {
/* first hexagon of even rows */
margin-left: 25%;
/* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</div>
</li>
</ul>