Question

当我将鼠标悬停在主页（https://howtogetrippedathome.com/）的“关于”部分中的“阅读我的故事”按钮上时，发生了一些奇怪的事情。当我将鼠标悬停在按钮的一侧时，只有整个按钮变为红色（但文本不会变成白色）。当我快速将鼠标悬停在按钮上的文本上方时，文本和文本的背景为香槟色，但是按钮的其余部分紧随其后。

我已经阅读了数十篇文章并尝试了所有内容，但我无法使其正常运行。我认为这与我要定位的元素有关，但是我不知道如何正确地做到这一点。

我使用以下代码：

.so-widget-sow-button .ow-button-base :hover {
    color: #fff;
    background-color: #ff2828;
    transition: 0.5s;
}

非常感谢您的帮助，因为我现在已经迷失了。

Answer 1

我在您的样式表中找到了这个CSS：

.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
            color: #ff2828 !important;
}

如您所见，

强制ow-button-base内的悬停链接的文本颜色为红色。删除a:hover行可以解决冲突；我也能够解决此问题，同时添加此CSS：

.ow-button-base a.ow-icon-placement-left:hover {
  color:white !important;
}

Answer 2

这是问题

tf.assign

它覆盖了您在此处放置的颜色。

var page = 1;
var selected = [];
var mediaAll = [];
var jsont = JSON.stringify({"action": "loadMedia", "page": page});
AJAXcall(jsont, "loadMedia");

function AJAXcall(data, action){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    console.log(xhttp);
    if (this.readyState == 4 && this.status == 200) {
      if(action=="loadMedia"){
        var media = JSON.parse(this.responseText);
        mediaAll = [];
        mediaAll = mediaAll.concat(media);
        mediaLoaded();
      }else if(action=="loadMoreMedia"){
        var media = JSON.parse(this.responseText);
        mediaAll = mediaAll.concat(media);
        mediaLoaded();
      }else if(action=="deleteMedia"){
        response = JSON.parse(this.responseText);
        console.log(response);
        page = 1;
        if(response == true){
          AJAXcall(jsont, "loadMedia");
        }
      }
    }
  };
  xhttp.open("POST", "./libs/img_handler.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(data);
}
function deleteSingle(){   
   if(selected.length === 1){
    if (confirm('sure?')) {
      var dataS = {"action": "deleteMedia", "id": selected[0]};
      dataDel = JSON.stringify(dataS);
      AJAXcall(dataDel, "deleteMedia");
    }
   }
}
function loadMore(){
  page++;
  var jsont = JSON.stringify({"action": "loadMoreMedia", "page": page});
  AJAXcall(jsont, "loadMoreMedia");
}

使其更坚固和/或移除so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover { color: #ff2828 !important; }

Answer 3

这是因为您使用的颜色对于锚点的悬停状态很重要，请尝试在下面的CSS中解决您的问题。

.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a：hover> span {color：#fff}

Answer 4

1）删除span的颜色，因为您需要将悬停符号更改为a标签

.so-widget-sow-button .ow-button-base :hover {
    color: #fff; *--->remove this*
    background-color: #ff2828;
    transition: .3s; *---> change transition with 0.3s as it is on your a tag*
}

2）在您的a标签上添加新的悬停，以更改span的颜色

.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover span {
   color: #fff;
   transition: .3s;
}

3）从定位标记的样式中删除!important

Answer 5

您必须通过 .ow-button-base：hover 选择来更改“ a”标签的颜色

.ow-button-base:hover > a
{
  color:#fff;
}

并删除

color:#ff2828 !important

悬停时，整个按钮不会改变

5 个答案: