鼠标悬停在鼠标悬停上，鼠标悬停在父级上悬停

Question

在下面的简单示例中，我想让纯蓝色 div 在鼠标悬停时增长，但只要光标在橙色框内，就保持这种状态。

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

真正的实现是在充满其他细节的复杂行上的类似工具提示的滑出。

.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 轻松完成（目前是这样实现的）：

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 方法。

如果事实上不可能，我会接受它作为答案。

当前的实现是在一个 Angular4 模板中，所以我们需要在模板中添加像 (mouseleave)="tooltipElement && hideTooltip($event.target.children) 这样的指令，这对我来说似乎是不必要的。

Answer 1

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

.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>

Answer 2

使用纯 CSS，您无法完全按照您的描述进行操作。您可以在悬停行时使蓝色边框增大，但在悬停蓝色元素时不会增大，并在悬停在行上时保留。

因此您可以将行悬停并应用于正确的元素，如果它符合您的要求，将如下所示：

.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:hover  .right{
  width: 100px;
}

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

Answer 3

我只是想在上面的评论中嵌入@Shaggy 提出的the single-listener solution，因为在那些有事件监听器的情况下实际上可能没问题。

{
    let current=0;
    document.getElementById("group").addEventListener("mouseover",event=>{
        let target=event.target;
        if(target.classList.contains("right"))
            (current=target).classList.add("hover");
        else if(target===event.currentTarget&&current){
            current.classList.remove("hover");
            current=0;
        }
    },0)
}

body{
  margin:0;
  padding:20px;
}
#group{
  border:1px solid #999;
  display:inline-block;
  padding:20px 20px 0;
}
.row{
  border:1px solid #f90;
  display:block;
  height:20%;
  margin:0 0 20px;
  padding:20px;
  width:400px;
}
.row>div{
  border:1px dashed #00f;
  display:inline-block;
  padding:20px;
  width:100px;
}
.row>.right{
  background:#00f;
  padding:20px 0;
  transition:width .5s ease;
  width:10px;
}
.row>.right.hover{
  width:100px;
}

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