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

我只想在上面的评论中提及the single-listener solution提出的内联@Shaggy，因为有些事件听众可能会很好。

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

将鼠标悬停在鼠标悬停上，将鼠标悬停在父节点上

3 个答案: