悬停容器时临时更改超链接颜色和悬停颜色答案

【问题标题】：Temporarily change the hyperlink color and it's hover color when hovering the container悬停容器时临时更改超链接颜色和悬停颜色
【发布时间】：2020-09-18 20:10:29
【问题描述】：

我里面有一个 DIV 和一个 A 标签，像这样：

<DIV CLASS="product"><A HREF="...">blah</A></DIV>

当用户将鼠标悬停在 DIV 上时，我想更改“A”文本颜色，所以我的 CSS 是：

.product a { color:blue; }
.product:hover a { color:red; }

作为 CSS，有效。但我正在创建一个“模板配置器”，我想向用户显示预览，使用 jQuery 动态更改颜色，如下所示：

$('.product a').css('color','green');
$('.product:hover a').css('color','yellow');

什么都没有发生...在 Chrome 的检查器中，我可以看到定义为“已接受”。但是，如果我尝试阅读...

16:03:16.250 $('.product:hover a').css('color')
16:03:16.255 undefined

知道为什么以及如何解决吗？

更新

正常：“A”是绿色文本。将鼠标悬停在 1 像素边框上触发 div:hover（鼠标不在“A”上）。
现在：“A”文本为红色。移出 DIV 外。
现在：回到原来的绿色文本。

我想动态地将红色变为黄色，例如，使用 jQuery。

【问题讨论】：

我不清楚绿色是从哪里进入的？如果您在悬停产品时显示预览，则链接将变为黄色...
在图像中就像.product a { color:green; } 和.product:hover a { color:red; }，我想动态地将红色更改为黄色，但$('.product:hover a').css('color','yellow'); 不起作用，没有任何反应。在最后的情况下，我希望在悬停 div 时显示正常的绿色和黄色。
好的，根据您的描述，听起来更改只发生在悬停 link 时，这就是为什么将蓝色更改为绿色没有意义 :) 我已经在您发表评论之前在下面添加了一个答案，所以我没有看到您的编辑（问题现在更清楚了） - 但是答案仍然适用。甚至可能比我最初想象的更合适！
@WOUNDEDStevenJones 不幸的是，这在 OP 的情况下不起作用，因为它会永久改变颜色（您可以在下面的一些答案中看到） - 他们只想应用临时颜色，所以他们'd 必须在 mouseover 上保存旧值并在 mouseout 上重新应用它们。
如果您正在寻找对该问题的解释，那是因为当您使用.css() 时，它会在选定的元素 api.jquery.com/css/#css2 上设置style 属性，并且没有元素.product:hover，因为这是.product 元素的悬停状态。为了更好地控制此类鼠标事件，链接的答案似乎提供了解决方案。

标签： javascript html jquery css

【解决方案1】：

如果您不想在悬停时永久更改颜色，那么您可以保持简单，只需在悬停时应用一个类，并使用它为您的预览指定 CSS。

更新：仅限 jQuery 的解决方案根据您最新的 cmets 和编辑，您无法将类添加到 CSS。所以让我们只使用 jQuery 来完成它！

1.用 jQuery 添加 CSS 样式（保持 CSS 类的灵活性）

以下示例仍然使用 css 类的强大功能和灵活性，但无需更改 HTML 或 CSS：

直接在 jQuery 中创建新的 CSS 规则 - 这使您可以轻松地在 CSS 中为预览类设置替代样式，例如：

$("<style>.preview .product:hover a{color:yellow;}</style>").appendTo("head");

将preview 类添加到mouseover 上的容器并在mouseout 上将其删除

$("<style> \
.preview .product a { color:green; } \
.preview .product:hover a { color:yellow; } \
</style>").appendTo("head");

$("#container").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when div is hovered</A>
  </div>
</div>

2。保存默认颜色并在鼠标移出时恢复

正如我之前提到的，另一种选择是使用变量来保存原始颜色，将它们替换为mouseover 上的临时颜色并恢复mouseout 上的原始值。正如我还提到的，这意味着为所有将要更改的样式存储变量，并且如果有很多样式，可能会变得笨拙且难以维护。

但是，如果您想尝试一下，我在下面通过一个示例对此进行了扩展。

// decalre variables to save the default colours
var origColor = $('.product a').css('color');
var origColorHover;  // we can't set this until the link is hovered

$(".product").mouseover(function() {
    // save hover colour
    if (origColorHover == "")  origColorHover = $(this).css('color');    
    // set the temporary hover colours
    $('.product a').css('color','green');
    $('.product a:hover').css('color','yellow');
}).mouseout(function() {
    // reset the original colour after hovering
    $('.product a').css('color', origColor);
    $('.product a:hover').css('color', origColorHover);
});

.product a { color:blue; }
.product a:hover { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when link is hovered</A>
  </div>
</div>

以前的例子（可能对其他有类似问题的用户有帮助）：

3.使用 CSS 类作为替代颜色并在悬停时应用该类

下面的示例使用 CSS 类来设置元素的替代样式，并使用 jQuery 在鼠标悬停时将类添加到容器中，例如：

$(".product").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }

.preview .product a { color:green; }
.preview .product:hover a { color:yellow; }

/* for demo only */
#container div { padding: 10px; margin: 10px; background: lightgrey;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when div is hovered</A>
  </DIV>
</div>

如果不知道您的项目是如何工作的，这很难说，但总的来说，这听起来像是一种更易于维护和适应的方式来应用不同的模板颜色？

您可以为.preview 设置一个完全不同的样式表，如果您愿意，只需应用该类即可一次更改多个样式。例如下面的示例将一组新样式应用于所有元素，或者如果您只想在每个 div 的基础上显示它，则将类应用于 div。

$("#container").mouseover(function() {
    $(this).addClass('preview');
}).mouseout(function() {
    $(this).removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }
.product2 a { color:green; }
.product2 a:hover { color:yellow; }

.preview { text-align: center;}
.preview .product a { color:green; }
.preview .product:hover a { color:orange; }
.preview .product2 a { color:purple; font-weight: bold; }
.preview .product2 a:hover { color:yellow; }

/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}

#container div {  padding: 10px; margin:10px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when container is hovered</A>
  </DIV>
  <DIV CLASS="product2">
    <A HREF="...">hover colour changes when link is hovered</A>
  </DIV>
</div>

【讨论】：

是的，这更接近我的需要，但在我的项目中，用户可以在色轮中选择颜色。请参阅原始消息中的图像（现已更新）。所以我不能添加/删除类，但这给了我一个新的想法，动态创建类......我会尝试但我认为这不会奏效。
@Arvy 是的，但是没有指定“动态”的方式 - 在 JS 中更改它是动态的，使用在运行时更改的变量值更改它是一个完全不同的级别！这需要与 how to change the hover color in jQuery 不同的答案——这就是这里的答案 :) 也许我们都误解了，但主要的是：如果问题和答案不'不匹配，这对其他用户没有帮助（这就是 SO 的全部意义所在）。我们无法更改所有答案，因此最好的选择是根据用户输入提出一个关于设置它的新问题。但我们仍然会提供帮助！
@Arvy 您仍然应该在此处发帖 - 现在我们了解了问题（只是花了一段时间才到达那里），因此如果需要更多帮助，我们可以通过编辑问题来解释它来帮助您。这对任何人来说都是一个难以解释的问题——即使是说英语的人 :) 我真的认为我们现在可以提供帮助。以后也请不要在这里问其他问题，可能需要一些时间才能解决不重要的问题，但您大部分时间都应该没问题 :) 我们随时为您提供帮助!
入睡后想了想这个问题，我试着换个角度思考，找到了一个行之有效的解决方案。我将在这里分享它以帮助其他人，但我要求您编辑任何必要的内容以使其尽可能清晰。非常感谢@FluffyKitten 的所有帮助！
@Arvy 很高兴您找到了解决方案！稍后我会看一下措辞是否需要任何调整:) 也许您可以添加此代码的添加位置，以便其他用户清楚 - 看起来它们是在 CSS 中添加的，但我没有认为你可以改变它，那么这是通过 jQuery 完成的吗？

【解决方案2】：

如果要使用 jquery 设置悬停颜色，则需要在给定对象上使用 hover 方法

$(".product a").hover(
    function() {
        $(this).css("color", "yellow");
    },
    function() {
        $(this).css("color", "green");
    }
);

CodePen

【讨论】：

显然它不喜欢 lambda。我将其编辑为工作版本。
当鼠标悬停在“A”颜色（A，而不是 DIV）上时，它会永久更改“A”颜色。我需要的是仅在鼠标悬停在 DIV（不是链接）上时更改“A”文本颜色，并在模糊时返回原始颜色。
我明白了。我刚刚进行了另一个更新来解决这个问题。悬停功能接受两个功能。一个设置悬停颜色，一个设置未悬停颜色。
嗯还没有，这会永久更改悬停颜色。我将用图像更新原始问题以更清晰。

【解决方案3】：

这是一个更改颜色和预览的工作示例。

$(document).ready(function () {
  $('#container .product a').hover(function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#hover').val());
    }
  }, function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#color').val());
    }
  });

  $('#checkbox').change(function () {
    if (this.checked) {
      $('.product a').css('color', $('#color').val());
    } else {
      $('.product a').css('color', '');
    }
  });
});

function isPreviewActive() {
  return $('#checkbox')[0].checked;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div class="product"><a href=="#">blah</a></div>
</div>

<p>
  <label>Color:</label>
  <input id="color" type="text" value="red"></input>
  <label>Hover:</label>
  <input id="hover" type="text" value="yellow"></input>
</p>
Enable Preview? <input type="checkbox" id="checkbox"></input>

【讨论】：

不，您正在更改文本颜色。这行得通。正如我所说，我想更改悬停颜色。如果您将代码从 $('.product a') 更改为 $('.product:hover a') 将不起作用。
你是对的。我已经更新了代码，现在它可以工作了。
嗯，工作但不完全符合我的需要。如果您将鼠标悬停在padding:10px 上添加.product（div），则不会更改“A”颜色。我需要将鼠标悬停在容器上并更改“A”的悬停颜色。但我找到了解决方案，请参阅我的新评论。

【解决方案4】：

我找到了一种解决方案，无需触摸对象本身即可更改颜色。该解决方案仅更改变量中的颜色。它只考虑支持“var”功能的 CSS3 的现代浏览器。

首先，我在变量中定义了 2 种颜色：

:root {
   --normal-color: green;
   --hover-color: red;
}

并将类设置为：

.product a { color: var(--normal-color); }
.product:hover a { color: var(--hover-color); }

现在我需要做的就是动态更改变量：

$(':root').css('--normal-color','blue');
$(':root').css('--hover-color','yellow');

所以，新的链接颜色为蓝色，当我将鼠标悬停在容器 (.product) 上时，链接将为黄色。

【讨论】：