悬停在选定项目上时如何保持h3元素的现有背景颜色

Posted 2023-03-06

【中文标题】悬停在选定项目上时如何保持h3元素的现有背景颜色

【英文标题】：How to maintain the existing background color of h3 element when hover on selected item

【发布时间】：2019-12-07 12:11:52

【问题描述】：

我有一个类似手风琴的控件，其中一个项目将展开，另一个项目将折叠。我有一个共同的背景颜色（不同的主题不同）和所有标题的不同悬停颜色。

我需要维护已展开的活动项目的背景颜色，并且不需要单独为该项目应用悬停颜色。

我有一个类来识别这一点，我通过悬停选择器应用了某个背景

CSS

.e-active:hover 
  background: #f00;      

我尝试使用透明但没有，但它会将背景更改为白色

这是硬编码的 CSS，但我需要一个通用的 CSS，以便为任何主题的悬停状态下的活动 h3 元素保持现有的背景颜色

【问题讨论】：

你能在浏览器开发者工具中看到你的css吗？

是的，css 已应用，但我不想直接应用特定的背景颜色。我需要继承相同的现有背景。我也试过“初始”和“继承”。

【参考方案1】：

您可以使用:not css 选择器

div 
  background: green;
  padding: 2px 20px;
  color: #ffffff;


h3 
  background: blue;
  padding: 6px;


h3:not(.e-active):hover 
  background: red;

<div>
  <h3 class="e-active">Heading 1</h3>
  <h3>Heading 2</h3>
  <h3>Heading 3</h3>
</div>

【参考方案2】：

您可能需要包含某种形式的 javascript/jQuery 来动态实现这一点（尽管我确信您也可以使用 SASS/SCSS 来动态实现这一点）。

脚本的主要焦点是检查标题是否有.e-active，而不是在该实例中应用.hover 类。关闭后，您只需将 :hover 更改为 .hover。

这是一个示例 - 运行代码 sn-p 以查看它的工作原理：

$('h1').mouseenter(function()
  if(!$(this).hasClass('e-active'))  //if heading does NOT have e-active class, apply hover effect
    $(this).addClass('hover');
  
);
$('h1').mouseleave(function()
  $(this).removeClass('hover');
);

h1 
  background-color: salmon;

h1.hover 
  background-color: teal;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Non active Heading 1</h1>
<h1 class="e-active">Active Heading 2</h1>
<h1>Non active Heading 3</h1>

---

编辑：

Bhuwans answer 显示使用 :not 选择器是一种更简洁的实现方式 - 我建议尽可能先使用该路由。

【讨论】：

感谢您的回答，但我需要应用通用 CSS 作为背景，以便维护现有的，我不需要直接指定颜色。

哦，我明白了，您可能需要使用一些 jQuery/JavaScript 来实现它。最简单的方法是在悬停时添加一个类更改，如果没有其他人返回纯 CSS 解决方案，我将编写一个示例供您使用：)

@keerthana - 看看我上面的Bhuwans answer - :not 伪选择器可能是解决这个问题的最佳方法 - 如果它适合你，请将他的答案标记为“ 接受" - （这是投票按钮下的大勾号）