CSS hover to stay on mouse over

Question

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

Answer 1

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.

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

---

EDIT

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.

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. Red Box shows when hovering on Blue Circle
2. Red Box hides when mouse leaves Reds

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;

}

Answer 3

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:

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