CSS悬停以保持鼠标悬停

Question

好的，如果你可以去的话；

http://jsfiddle.net/aled2305/UzM7U/4/

您会看到一个蓝色圆圈，当您将鼠标移到右侧时会出现一个红色方块。现在一切都按照我想要的方式进行了，但是我希望当用户将鼠标悬停在它上面时，红色框会保留下来。

现在，如果您将鼠标移到红色方块显示的位置，它会显示，因为

.down:hover
{
    opacity:100;
}

那么有没有办法让红色方块在鼠标悬停时保持不变，但只有在将鼠标悬停在蓝色圆圈上时才会激活它。

提前致谢

阿莱德

更新

抱歉，我想在鼠标移开后隐藏红色方块。

谢谢

Answer 1

我的演示将在 circle 上悬停时淡入 square。从那里开始，当您将鼠标悬停在 正方形 上时，它将保持不透明。离开圆形或方形后，方形会淡出。

让它工作的诀窍是为 square 的 opacity、height 和 width 属性设置 2 个不同的转换，一个用于 hover ON 和一个用于 hover OFF，以及为过渡添加一个delay 属性。转换height 和width 的原因是，它会阻止您在未先将鼠标悬停在圆上的情况下将鼠标悬停在正方形上。

方块的默认设置如下：opacity: 0、height: 0 和 width: 0。

对于 hover ON 过渡，您希望 opacity 淡入超过 1 秒，但要能够看到，height 和 width 值需要为 40px在淡入过渡之前。为此，您需要在height 和width 转换上设置0 秒的延迟。这样，正方形会立即处于其最大尺寸，从而可以看到淡入过渡。

hover OFF 过渡将恢复为默认设置。您希望opacity 在 1 秒内缓出，同时将 height 和 width 的值保持在 40px。否则，height 和 width 将立即恢复为 0，您将无法看到淡出过渡。要做到这一点，您需要在 height 和 width 转换上设置 1 秒的延迟。这样做时，opacity 会减少 1 秒以上，并且由于 height 和 width 的 1 秒延迟，此时，height 和 width 将恢复为 0。

See the jsFiddle demo

HTML

<div id="gravatar">
    <div id="circle"></div>
    <div id="square"></div>
</div>

CSS

#gravatar
{
    float: left;
}

#circle
{
    background-color: blue;
    float: left;
    height: 40px; 
    width: 40px;
    border-radius: 20px;
}

#square
{
    background-color: red;
    float: left;
    margin-left: 10px;
    height: 0;
    width: 0;
    opacity: 0;

    /* hover OFF */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
    transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
}

#square:hover,
#circle:hover + #square
{
    height: 40px;
    width: 40px;
    opacity: 1;

    /* hover ON */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
}

---

编辑

OP 留下了一条评论，指出向 square 添加内容会阻止转换正常工作。我通过将overflow: hidden 添加到正方形来更正它。

我还在 CSS 中添加了其他样式来说明 OP 添加的锚点。

See the jsFiddle demo

HTML

<div id="gravatar">
    <div id="circle"></div>
    <div id="square">
        <a href="http://techyoucation.com/?page_id=156">Profile Details</a> 
        <a href="http://techyoucation.com/?page_id=59">Account Details</a>
    </div>
</div>

CSS

#gravatar
{
    float: left;
}

#circle
{
    background-color: blue;
    float: left;
    height: 40px; 
    width: 40px;
    border-radius: 20px;
}

#square
{
    background-color: #2D3538;
    float:left;
    overflow: hidden;
    margin-left: 10px;
    height: 0;
    width: 0;
    opacity: 0;
        
    /* hover OFF */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
}

#square > a
{
    display: block;
    font: 15px Verdana;
    color: #FFF;
    text-decoration: none;
    height: 15px;
    line-height: 15px;
    margin: 10px;
}

#square > a:last-child
{
    margin-top: 0;
}

#square > a:hover
{
    text-decoration: underline;
}

#square:hover,
#circle:hover + #square
{
    height: 60px;
    width: 135px;
    opacity: 1;
    
    /* hover ON */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
}

Answer 2

Here's a Fiddle Using JS that follows the following logic:

1. 悬停在蓝色圆圈上时显示红色框
2. 当鼠标离开 Reds 时，Red Box 会隐藏

您可以通过添加一点 JQuery 并修改您的 CSS 来获得该效果：

JQuery：

$(".gravatar").hover(
  function () {
    $(".down").addClass('hoverDown');
  }
);

$(".down").mouseleave(
  function () {
    $(".down").removeClass('hoverDown');
  }
);

这是 CSS：

.gravatar {
    background-color:blue;
    float: left;
    margin-top: 2px;
    margin-right: 10px;
    margin-left:  2px;
    border-radius: 20px;
    width: 40px;
    height: 40px; 
}

.down
{
    float:left;
    width: 40px;
    height: 40px;
    background-color:Red;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;


    }
.hoverDown
{
    opacity:1;

}

Answer 3

您可以使用 javascript 或 CSS3 动画，这里是 CSS3 动画的示例...Make CSS Hover state remain after "unhovering"

CSS 2.1 不能做你想做的事。

Answer 4

对于鼠标移入和移出操作，您可以使用 mouseenter mouseleave jquery 函数

$(".gravatar").mouseenter(
  function () {
    $(".down").addClass('hoverDown');
  }
);
$(".gravatar").mouseleave(
  function () {
    $(".down").removeClass('hoverDown');
  }
);

工作小提琴：

http://jsfiddle.net/UzM7U/9/