Question

基本上，在悬停时，我正在更改链接的文本颜色，我能够实现所需的功能，但是，这对我来说看起来太多了代码，我相信应该有更好的方法。我想知道是否有比这更好的逻辑。请提出建议。

function getEndpoint1() {
  return axios.get('https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json');
}

function getEndpoint2() {
  return axios.get('https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json');
}

axios.all([getEndpoint1(), getEndpont2()])
  .then(axios.spread(function (resp1, resp2) {
    // Both requests are now complete
     console.log(resp1 + resp2)
  }));

Answer 1

是的，有一种更简单的方法，所有这些都可以使用CSS :hover选择器完成。

例如：

a {
  color: blue;
}

a.link1:hover {
  color: red;
}

a.link2:hover {
  color: yellow;
}

<a class="link1" href="">Link 1</a>
<a class="link2" href="">Link 2</a>

修改：

如果您使用style属性应用样式，那么我相信没有任何东西（!important属性除外）可以覆盖该样式，因此，如果您通过样式提供初始颜色，但在样式表中提供了悬停颜色，则将悬停颜色将被初始样式覆盖，并且不会显示。因此，最好不要混合使用内联样式和样式表样式。

这是发生的情况的一个示例：

a.link1:hover {
  color: red;
}

a.link2:hover {
  color: red !important;
}

<a class="link1" style="color: blue;" href="">Always Blue</a>
<a class="link2" style="color: blue;" href="">Using Important (but you shouldn't)</a>

注意：我真的不建议在这里使用!important标志，而是建议删除嵌入式样式。

ReactJS：有更好的方法吗？

1 个答案: