将鼠标悬停在鼠标悬停上，将鼠标悬停在父悬停上时悬停 [英] Hover on mouse-over, un-hover on mouse-out of parent

问题描述

在下面的琐碎示例中，我希望鼠标悬停时会显示稳定的蓝色div，但只要光标位于橙色框内，就可以保留此状态.

In my trivial example below, I would like to have the solid blue div grow on mouse-over, but to preserve this state as long as the cursor is inside the orange box.

一旦光标离开橙色框，蓝色实心框应折叠.橙色框代表列表中的一行.

Once the cursor leaves the orange box, the solid blue box should collapse. The orange box represents a row in a list.

真正的实现是在复杂的行上以类似工具提示的方式进行滑动，其中包含其他详细信息.

The real implementation is in a tool-tip-like slide-out on a complex row full of other details.

.row {
  border: 1px solid orange;
  display: block;
  height: 20%;
  padding: 20px;
  width: 400px;
}

.row div {
  border: 1px dashed blue;
  display: inline-block;
  text-align: center;
  padding: 20px;
  width: 100px;
}

.row .right {
  background: blue;
  padding: 20px 0;
  transition: width 0.5s ease;
  width: 10px;
}

.row .right:hover {
  width: 100px;
}

<div class="row">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

当然，这可以使用JavaScript轻松完成(这是当前的实现方式):

Of course, this can easily be accomplished with JavaScript (which is how it is currently implemented):

let right = $('.right');

right.mouseenter(() => right.addClass('hover'))

$('.row').mouseleave(() => right.removeClass('hover'))

.row {
  border: 1px solid orange;
  display: block;
  height: 20%;
  padding: 20px;
  width: 400px;
}

.row div {
  border: 1px dashed blue;
  display: inline-block;
  text-align: center;
  padding: 20px;
  width: 100px;
}

.row .right {
  background: blue;
  padding: 20px 0;
  transition: width 0.5s ease;
  width: 10px;
}

.row .right.hover {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

但是出于代码可读性，性能和可维护性的原因，我希望尽可能使用一种纯CSS方法.

But I would like, if possible, to use a purely CSS approach for reasons of code readability, performance and maintainability.

如果实际上不可能，我将接受它作为答案.

If it is in fact impossible, I will accept that as an answer.

当前的实现是在Angular4模板中进行的，因此我们需要使用(mouseleave)="tooltipElement && hideTooltip($event.target.children)之类的指令添加模板，这似乎对我来说是不必要的.

The current implementation is in an Angular4 template, so we need to pepper the templates with directives like (mouseleave)="tooltipElement && hideTooltip($event.target.children) which seem like they should be unnecessary to me.

推荐答案

这是一种使用小技巧来模拟保留悬停状态的方法.它不会永远保留它，而是在您定义为动画延迟的持续时间内.在大多数情况下，悬停时间大概是10分钟，在大多数情况下都是这样，如果您想使其持续更长的时间，您只需要增加下面代码中的数字即可.

Here is an approach that uses a little hack to simulate the preserve hover state thing. It does not keep it forever but for the duration you define as animation-delay. Probably 10 minutes of hovering is like forever in most scenarios, if you want to make it last longer you would just have to increase the number in the code below.

.row {
  border: 1px solid orange;
  display: block;
  height: 20%;
  padding: 20px;
  width: 400px;
}

.row div {
  border: 1px dashed blue;
  display: inline-block;
  text-align: center;
  padding: 20px;
  width: 100px;
}

.row .right {
  background: blue;
  padding: 20px 0;
  transition: width 0.5s ease 600s;
  width: 10px; /* Unfortunately, this has to be 'different' from ... */
}

.row .right:hover {
  width: 100px;
  transition: 0.5s;
}

.row:not(:hover) .right {
  width: 10.01px; /* ... this width. See http://stackoverflow.com/q/43393653 */
  transition: 0.5s ease;
}

<div class="row">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

这篇关于将鼠标悬停在鼠标悬停上，将鼠标悬停在父悬停上时悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！