-1

好的，如果你可以去；

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

您将看到一个蓝色圆圈，当您将鼠标悬停在右侧时会出现一个红色方块。现在一切都按我想要的方式工作，但我希望当用户将鼠标悬停在它上面时，红色框保持不变。

现在，如果您将鼠标悬停在红色方块显示的位置上，它将显示为

.down:hover
{
    opacity:100;
}

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

提前致谢

阿莱德

更新

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

谢谢

4

4 回答 4

3

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

让它工作的技巧是为squareopacity的、height和width属性设置 2 种不同的转换，一种用于悬停 ON，一种用于悬停 OFF，以及为转换添加一个属性。过渡的原因是它会阻止您在没有先将鼠标悬停在圆圈上的情况下将鼠标悬停在正方形上。delayheightwidth

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

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

悬停关闭过渡将恢复为默认设置。你想要发生的事情是opacity在 1 秒内缓出，同时保持40pxheight和width40px 的值。否则，heightandwidth会立即恢复为 0，您将无法看到淡出过渡。要做到这一点，您需要在height和width转换上设置 1 秒的延迟。在这样做的过程中，opacity由于 1 秒的延迟height和1 秒后缓和width，此时，height将width恢复为 0。

查看 jsFiddle 演示


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 留下了一条评论，指出向正方形添加内容会阻止转换正常工作。我通过添加overflow: hidden到square来纠正它。

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

查看 jsFiddle 演示


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;
}
于 2013-11-13T23:39:33.337 回答
2

这是一个使用 JS 的小提琴，它遵循以下逻辑：

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

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

查询：

$(".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;

}
于 2013-11-13T22:27:59.200 回答
0

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

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

工作小提琴：

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

于 2013-11-13T22:49:01.947 回答
0

您可以使用 javascript 或 CSS3 动画 CSS3 动画的示例在这里...使 CSS 悬停状态在“悬停”后保持不变

CSS 2.1 不能做你想做的事。

于 2013-11-13T22:50:03.910 回答