[英]CSS hover to stay on mouse over
Okay, so if you could go to; 好吧,如果可以的话
http://jsfiddle.net/aled2305/UzM7U/4/ http://jsfiddle.net/aled2305/UzM7U/4/
you will see a blue circle, when you take your mouse over a red square will appear to the right. 您会看到一个蓝色的圆圈,将鼠标移到红色方块的右边。 Now that all works how I want, but I would like the red box to stay when the user then takes their mouse over it.
现在一切都按我想要的方式工作了,但是当用户将鼠标移到上方时,我希望红框保留下来。
Now if you take your mouse over where the red square shows, it will show because of 现在,如果您将鼠标移到红色方块显示的位置,它将显示为
.down:hover
{
opacity:100;
}
So is there a way to get the red square to stay when a mouse is over it, but only when it is activated by hovering over the blue circle. 因此,有一种方法可以使鼠标悬停在红色正方形上,但只有通过将鼠标悬停在蓝色圆圈上才能激活红色正方形。
Thanks in advance 提前致谢
Aled 艾丽德
UPDATE 更新
Sorry forgot to say I would like the red square to hide once the mouse has been taken off. 抱歉忘了说,一旦鼠标取下,我想隐藏红色方块。
Thanks 谢谢
My demo will fade-in the square upon hovering the circle . 当鼠标悬停在圆圈上时,我的演示将淡入正方形 。 From there, when you hover over the square , it will stay opaque.
从那里开始,当您将鼠标悬停在广场上时 ,它将保持不透明。 After you move off the circle or square , the square will fade-out.
从圆形或正方形移开后, 正方形将消失。
The trick to getting this to work is setting 2 different transitions for the opacity
, height
, and width
properties of the square , one for hover ON and one for hover OFF , as well as adding a delay
attribute to the transition. 使其起作用的技巧是为正方形的
opacity
, height
和width
属性设置2个不同的过渡,为悬停打开设置一个过渡,为悬停关闭设置一个过渡,以及为过渡添加delay
属性。 The reason for transitioning height
and width
is that it will prevent you from being able to hover over the square without first hovering over the circle . 转换
height
和width
的原因是,这将阻止您将鼠标悬停在正方形上而无需先将鼠标悬停在圆圈上 。
Here are the default settings of the square : opacity: 0
, height: 0
, and width: 0
. 这是正方形的默认设置:
opacity: 0
, height: 0
和width: 0
。
For the hover ON transition, you want opacity
to fade-in over 1 second, but to be able to see that, the height
and width
values need to be 40px prior to the fade-in transition. 对于将鼠标悬停在ON上的过渡,您希望
opacity
在1秒钟内淡入,但要能够看到, height
和width
值必须在淡入过渡之前为40px。 To make that happen, you need to set a delay of 0 seconds on the height
and width
transitions. 为此,您需要在
height
和width
过渡上设置0秒的延迟。 This way, the square is immediately at its max dimensions, which allows the fade-in transition to be seen. 这样, 正方形立即处于其最大尺寸,从而可以看到淡入过渡。
The hover OFF transition will revert back to the default settings. 悬停OFF转换将恢复为默认设置。 What you want to have happen is for the
opacity
to ease-out over 1 second while at the same time keeping the values of height
and width
at 40px. 您想要发生的是使
opacity
在1秒钟内缓和,同时将height
和width
的值保持在40px。 Otherwise, height
and width
would instantly revert back 0 and you would not be able to see the fade-out transition. 否则,
height
和width
将立即恢复为0,并且您将看不到淡出过渡。 To make that happen you need to set a delay of 1 second on the height
and width
transitions. 为此,您需要在
height
和width
过渡上设置1秒的延迟。 In doing that, the opacity
eases out over 1 second and because of the 1 second delay on height
and width
, at that point, height
and width
will revert back 0. 这样做时,
opacity
1秒以上,并且由于height
和width
延迟1秒,因此, height
和width
将恢复为0。
<div id="gravatar">
<div id="circle"></div>
<div id="square"></div>
</div>
#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;
}
The OP left a comment stating that adding contents to the square prevents the transitions from working correctly. OP留下评论,指出将内容添加到正方形会阻止过渡正常工作。 I corrected it by adding
overflow: hidden
to the square . 我通过添加
overflow: hidden
到正方形来更正它。
I also added other styles to the CSS to account for the anchors the OP added. 我还向CSS添加了其他样式,以说明OP添加的锚点。
<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>
#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;
}
Here's a Fiddle Using JS that follows the following logic: 这是一个使用JS的小提琴,遵循以下逻辑:
You can get that effect by adding a little JQuery and modifying your CSS: 您可以通过添加一些JQuery并修改CSS来获得这种效果:
JQuery: jQuery的:
$(".gravatar").hover(
function () {
$(".down").addClass('hoverDown');
}
);
$(".down").mouseleave(
function () {
$(".down").removeClass('hoverDown');
}
);
Here's the CSS: 这是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;
}
well for mouse in and mouse out action you can use the mousenter mouseleave jquery function 很好的鼠标进入和鼠标移出动作,可以使用mousenter mouseleave jquery函数
$(".gravatar").mouseenter(
function () {
$(".down").addClass('hoverDown');
}
);
$(".gravatar").mouseleave(
function () {
$(".down").removeClass('hoverDown');
}
);
working fiddle: 工作提琴:
You can either use javascript or CSS3 Animations an example of CSS3 animations is here ... Make CSS Hover state remain after "unhovering" 您可以使用javascript或CSS3动画,此处是CSS3动画的一个示例... 使“悬停”后保持CSS悬停状态
CSS 2.1 can not do what you want. CSS 2.1不能做您想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.