Question

我希望所有元素与班级＆＃34; hoverOutline＆＃34;当你将鼠标悬停在它们上面时有一个轮廓。这个CSS 主要很好：

df_sampled = df.set_index('date').resample('5D').mean().reset_index()
#alternative
#df_sampled = df.resample('5D', on='date').mean().reset_index()

x = df_sampled['date']
y = df_sampled['value']

唯一的问题是这会导致该类的任何父元素也具有轮廓。我明白这是有目的的（因为你也悬停在他们身上），但我想只概述最里面的孩子。（首先触发事件的那个）。

我想补充一点，我已经研究过了，大多数人在纯CSS中使用JQuery或者一些hacky work-around。对我来说，Javascript是100％好的。

编辑：这是一个书签，所以我不能事先知道页面上的元素。这必须适用于该类的所有元素，但是没有该类的孩子......

Answer 1

The element Selector用于＆＃34;找到＆＃34; （或选择）基于元素名称，id，类，属性等的HTML元素。

这意味着您可以拥有相同的类，但使用该类定义标记以查看testlpe

＆＃13;

a.hoverOutline:hover {
    outline: 2px solid black;
}
a {
 width:220px;
 height:50px;
 display:inline-block;
 background-color:blue;
 color:white;
 line-height:50px;
 text-align:center;
 margin:auto;
}
div.hoverOutline{
 width:420px;
 height:100px;
 display:inline-block;
 background-color:green;
 
}

＆＃13;

<div class="hoverOutline"><a class="hoverOutline"> This a tag mast outline on hover</a></div>

＆＃13;

Answer 2

试试这个

$(".hoverClass1").hover(function(){
    $(".hoverClass2").removeClass("hoverClass2");
    $(this).addClass("hoverClass2");
},function(){
    $(this).removeClass("hoverClass2");
});

.hoverClass:hover{
    border:1px solid red
}

.hoverClass1{
}

.hoverClass2{
    border:1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverClass1">
    <input type="text" class="hoverClass1" placeholder="hover me !!">
</div>

Answer 3

更新

演示2使用JavaScript来隔离和概述满足两个要求的元素：

必须拥有.hover类
不得有任何类.hover

注意： <legend>也有.hover类（实际上所有内容都有.hover），因此满足要求时，它也有悬停的效果。

如果您提交的帖子没有拼写错误，则问题非常简单。像:hover这样的伪类具有特定的语法，因为它为目标选择器添加后缀，如下所示：

.hoverOutline:hover {
    outline: 2px solid black;
}

要解决具有相同类的父级并且您需要排除父级，请尝试使用父级的tagName，如下所示：

.hoverOutline:hover {
  outline: 2px solid black;
}

section.hoverOutline:hover {
  outline: 0 none transparent;
}

在这两个规则集中，第二个规则集通过指定<section>并将其放在原始规则集之后应用于父级，该规则集在specificity中更通用且更低。

演示1

.hoverOutline :hover {
  outline: 2px solid black;
}

.hover:hover {
  outline: 2px solid black;
}

fieldset.hover:hover{
  outline:0 none transparent;
}

<fieldset>
  <legend>Incorrectly Syntax</legend>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hov'>hover</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
</fieldset>

<fieldset class='hover'>
  <legend>Correct Syntax</legend>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hov'>hover</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
</fieldset>

演示2

window.addEventListener('mouseover', mouseEnter, false);

window.addEventListener('mouseout', mouseLeave, false);

function mouseEnter(e) {
  /* if hovered node is NOT the registered
  || event listener...
  */
  if (e.target !== e.currentTarget) {
    // Reference hovered element
    var tgt = e.target;

    // Reference the first child with .hover
    var kid = tgt.querySelector('.hover');

    /* if hovered node has class .hover and
    || does NOT have a child with class .hover...
    */
    if (tgt.classList.contains('hover') && !kid) {

      // add class .outline to hovered node
      tgt.classList.add('outline');

      // Otherwise do nothing and end function
    } else {
      return;
    }

    // Stop the bubbling phase
    e.stopPropagation();
  }
}

function mouseLeave(e) {

  if (e.target !== e.currentTarget) {
    var tgt = e.target;
    tgt.classList.remove('outline');
  }
  e.stopPropagation();
}

form {
  border: 1px solid black;
}

.outline {
  outline: 3px solid red
}

<form id='form' class='hover'>
  <fieldset class='hover'>
    <legend class='hover'>Correct Syntax</legend>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hov'>hover</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
  </fieldset>
</form>

为当前悬停的元素添加轮廓

3 个答案:

更新

演示1

演示2