Question

好的，如果你可以去;

你会看到一个蓝色圆圈，当你把鼠标移到红色方块上时会出现在右边。现在一切都按照我想要的方式进行，但是当用户将鼠标移到它上面时，我希望红色框保持不变。

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

.down:hover
{
    opacity:100;
}

当鼠标悬停在红色方块上时，有没有办法让红色方块停留，但只有当它悬停在蓝色圆圈上才能激活。

提前致谢

ALED

更新

抱歉忘了说我想要在取下鼠标后隐藏红色方块。

由于

Answer 1

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

让这个工作起作用的技巧是为正方形的opacity，height和width属性设置2个不同的转换，一个用于< strong>悬停在，一个用于悬停关闭，并在转换中添加delay属性。转换height和width的原因是它会阻止您将鼠标悬停在方上，而不会先将鼠标悬停在圈上。

以下是方的默认设置：opacity: 0，height: 0和width: 0。

对于悬停在转换，您希望{1}}在1秒内淡入，但为了能够看到opacity和{{1}在淡入过渡之前，值必须是40px。要实现这一点，您需要在height和width转换上设置0秒的延迟。这样，正方形立即处于最大尺寸，这样可以看到淡入过渡。

悬停关闭转换将恢复为默认设置。您希望发生的是height缓出超过1秒，同时将width和opacity的值保持在40px。否则，height和width会立即恢复为0，您将无法看到淡出过渡。要实现这一点，您需要在height和width转换上设置1秒的延迟。在此过程中，height缓解超过1秒，由于width和opacity上的1秒延迟，此时height和width将恢复为0。

See the jsFiddle demo

HTML

height

CSS

width

修改

OP留下了一条评论，指出将内容添加到方会阻止转换正常工作。我通过将<div id="gravatar"> <div id="circle"></div> <div id="square"></div> </div>添加到正方形来更正了它。

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

See the jsFiddle demo

HTML

#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;
}

CSS

overflow: hidden

Answer 2

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

红色框显示何时悬停在蓝圈上
当鼠标离开红色时，红盒子隐藏

您可以通过添加一些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

对于鼠标输入和鼠标移动操作，您可以使用mouseenter mouseleave jquery功能

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

工作小提琴：

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

Answer 4

你可以使用javascript或CSS3动画，这里有一个CSS3动画示例...... Make CSS Hover state remain after "unhovering"

CSS 2.1无法做到你想要的。

CSS悬停在鼠标上

4 个答案:

See the jsFiddle demo

HTML

CSS

修改

See the jsFiddle demo

HTML

CSS