MouseOver和MouseOut在CSS中

Question

爲了將鼠標用於一個元素，我們使用了:hover CSS屬性。如何將鼠標移出元素？

我在元素上添加了一個過渡效果來改變顏色。懸停效果可以正常工作，但是我應該使用什麼CSS屬性來爲鼠標應用效果？我正在尋找一個CSS解決方案，而不是JavaScript或JQuery解決方案。

Answer 1

這是我認爲的最佳解決方案。

CSS onomouseout：

div:not(:hover){ ... } 

CSS的onmouseover：

div:hover{ ... } 

這是更好，因爲如果你需要設置一些風格ONLY的onmouseout並試圖做到這一點這樣

div { ... } 

你也可以設置你的風格和onmouseover。

Answer 2

你只需要:hover，當鼠標移出這個元素時，它會返回到它的默認非：懸停狀態，就像這樣：

.class { color: black; } 
.class:hover { color: red; } 

當你徘徊，顏色爲紅色並且當您「鼠標懸停」時，顏色將返回到黑色，因爲它不再與:hover選擇器匹配。這是所有瀏覽器的默認行爲，這裏沒有什麼特別的。

Answer 3

CSS本身不支持mousein或mouseout選擇器。

:hover選擇器將應用於元素，而鼠標在它上面時，鼠標進入時添加樣式，鼠標離開時刪除樣式。

最接近的方法是定義mouseout在您的默認（非懸停）樣式中放置的樣式。將鼠標移到元素上時，hover中的樣式將生效，模擬mousein，並且當您將鼠標移出元素時，默認樣式將再次生效，模擬mouseout。

下面是一個example，從here採取：

div { 
    background: #2e9ec7; 
    color: #fff; 
    margin: 0 auto; 
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in; 
    -moz-transition: -moz-border-radius 0.5s ease-in; 
    -o-transition: border-radius 0.5s ease-in; 
    -ms-transition: border-radius 0.5s ease-in; 
    transition: border-radius 0.5s ease-in; 
    text-align: center; 
    width: 200px; 
} 


div:hover { 
    background: #2fa832; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform: rotate(720deg); 
    -moz-transform: rotate(720deg); 
    -o-transform: rotate(720deg); 
    -ms-transform: rotate(720deg); 
    transform: rotate(720deg); 
} 

爲div:hover樣式定義當鼠標進入將生效的transition S（和hover被施加）。 div樣式的transition將在鼠標離開時生效（並且刪除hover）。這導致mousein和mouseout轉換不同。

Answer 4

我認爲我找到了解決方案。

.class :hover { 
    /*add your animation of mouse enter*/ 
} 

.class { 
    /* 
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out 
    */ 
} 

試試看... :)