CSS懸停以將鼠標懸停

Question

好吧，如果可以的話

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

您會看到一個藍色的圓圈，將鼠標移到紅色方塊的右邊。 現在一切都按我想要的方式工作了，但是當用戶將鼠標移到上方時，我希望紅框保留下來。

現在，如果您將鼠標移到紅色方塊顯示的位置，它將顯示為

.down:hover
{
    opacity:100;
}

因此，有一種方法可以使鼠標懸停在紅色正方形上，但只有通過將鼠標懸停在藍色圓圈上才能激活紅色正方形。

提前致謝

艾麗德

更新

抱歉忘了說，一旦鼠標取下，我想隱藏紅色方塊。

謝謝

Answer 1

當鼠標懸停在圓圈上時，我的演示將淡入正方形 。 從那里開始，當您將鼠標懸停在廣場上時 ，它將保持不透明。 從圓形或正方形移開后， 正方形將消失。

使其起作用的技巧是為正方形的opacity ， height和width屬性設置2個不同的過渡，為懸停打開設置一個過渡，為懸停關閉設置一個過渡，以及為過渡添加delay屬性。 轉換height和width的原因是，這將阻止您將鼠標懸停在正方形上而無需先將鼠標懸停在圓圈上 。

這是正方形的默認設置： opacity: 0 ， height: 0和width: 0 。

對於將鼠標懸停在ON上的過渡，您希望opacity在1秒鍾內淡入，但要能夠看到， height和width值必須在淡入過渡之前為40px。 為此，您需要在height和width過渡上設置0秒的延遲。 這樣， 正方形立即處於其最大尺寸，從而可以看到淡入過渡。

懸停OFF轉換將恢復為默認設置。 您想要發生的是使opacity在1秒鍾內緩和，同時將height和width的值保持在40px。 否則， height和width將立即恢復為0，並且您將看不到淡出過渡。 為此，您需要在height和width過渡上設置1秒的延遲。 這樣做時， opacity 1秒以上，並且由於height和width延遲1秒，因此， 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到正方形來更正它。

我還向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;
}

Answer 2

這是一個使用JS的小提琴，遵循以下邏輯：

1. 在藍色圓圈上懸停時會顯示紅色框
2. 當鼠標離開紅色時，紅色框隱藏

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

很好的鼠標進入和鼠標移出動作，可以使用mousenter mouseleave jquery函數

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

工作提琴：

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

Answer 4

您可以使用javascript或CSS3動畫，此處是CSS3動畫的一個示例... 使“懸停”后保持CSS懸停狀態

CSS 2.1不能做您想要的。