Okay, so if you could go to;
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. 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 .
Here are the default settings of the square : opacity: 0
, height: 0
, and 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. To make that happen, you need to set a delay of 0 seconds on the height
and width
transitions. 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. 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. Otherwise, height
and width
would instantly revert back 0 and you would not be able to see the fade-out transition. To make that happen you need to set a delay of 1 second on the height
and width
transitions. 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.
<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. I corrected it by adding overflow: hidden
to the square .
I also added other styles to the CSS to account for the anchors the OP added.
<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:
You can get that effect by adding a little JQuery and modifying your CSS:
JQuery:
$(".gravatar").hover(
function () {
$(".down").addClass('hoverDown');
}
);
$(".down").mouseleave(
function () {
$(".down").removeClass('hoverDown');
}
);
Here's the 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
$(".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"
CSS 2.1 can not do what you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.