Question

我试图在鼠标悬停在形状上时将文本的颜色更改为白色。

这是我到目前为止的一个小提琴：http://jsfiddle.net/4cjrmpy6/

我需要在

上使用：before或：after伪元素吗？

#stern a

实现这个目标？

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
padding:0 7px;
}

#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;
}

#stern a {
    color:#000;
    text-decoration:none;
}

#stern a:hover {
color:#fff;
}

我非常感谢任何帮助！

Answer 1

可能，你想要

#stern:hover a {
    color:#fff;
}

也就是说，在a悬停时设置元素#stern的颜色。

＆＃13;

#stern {
  background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
  background-size:100%;
  text-align: center;
  vertical-align: middle;
  width: 165px;
  height: 75px;
  position:absolute;
  display:table;
}
.sterntext {
  z-index: 999;
  position: relative;
  height: 75px;
  vertical-align: middle;
  display: table-cell;
  padding:0 7px;
}
#stern:hover {
  background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
    no-repeat center;
  color:#fff;
  background-size:100%;
}
#stern a {
  color:#000;
  text-decoration:none;
}
#stern:hover a {
  color:#fff;
}

＆＃13;

<div id="stern">
  <p class="sterntext">
    <a href="#">The venga bus is coming</a>
  </p>
</div>

＆＃13;

将鼠标悬停在div上时更改文本颜色

1 个答案: