CSS製作div更改不透明度，當盤旋時的亮度

我的目標是創建一個顯示可點擊的文本內容的區域，懸停改變了整個區域，並且在整個div或文本翻轉時不顯示。我想用CSS來做這件事。CSS製作div更改不透明度，當盤旋時的亮度

例如，我想要一個div，比如500 x 500像素，在這個div裏面是p和a，需要點擊。它正常工作。喜歡的東西：

<div style="width:500px; height:500px;"> 
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p> 
</div>

然後，我想在上面一個div，有一個翻轉（懸停）函數，它涵蓋了整個第一個div的霧化了用透明色全格，直到翻了個身，當透明度設置爲0.0，並顯示消失。但我想要第一個div的鏈接是可點擊的（爲此，我給第二個div pointer-events:none）。我把這段代碼*第一個div裏面，所以在總看起來像這樣：

<div style="width:500px; height:500px;"> 
*<div class="divhover" style="width:500px; height:500px; position:absolute;"> 
</div> 
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p> 
</div>

造型與CSS類：

div.divhover { 
    background-color: hsla(0, 100%, 100%, 0.5); } 
div.divhover:hover { 
    background-color: hsla(0, 100%, 100%, 0.0); 
    pointer-events: none; }

沒有pointer-events:none，這就像一個正常的懸停功能：如果你的鼠標不在div區域，有0.5透明度的白色層。如果您的鼠標在上面，則透明度爲0.0，看起來好像沒有被遮蓋。但是，這不允許點擊文本和鏈接元素。

使用pointer-events:none時，文本和鏈接是可點擊的，但當光標位於p或元素上方時，會導致懸停停用。如果光標四處移動，這將使整個div變爲閃爍狀態，如果光標懸停在鏈接上，則會快速閃爍！我不想要這個！

我希望你有更多的CSS/HTML知識可以幫助我（我不太瞭解）。在得到這些之前，我嘗試在.divhover:hover上設置z-index:-1以使第一個div中的文本和鏈接可點擊。我也嘗試使用position:absolute將第二個div移出頁面（left:2000px）。這兩者都導致了相同的情況，因爲它們只是與pointer-events做同樣的事情的不同方式。

這裏是一個的jsfiddle在這裏你可以看到閃爍：

http://jsfiddle.net/6wU8X/

儘管這不是明顯的在這裏，如果你拿出pointer-events:none，鏈接和文本將無法點擊。

來源

2014-02-07 PLCcory

您看到的閃爍是由懸浮屬性上的設置pointer-events:none;造成的。

您正在告訴瀏覽器忽略所有指針事件，即使是那些觸發懸停狀態的指針事件。所以，當你激活懸停CSS你停用它，導致閃爍（它通過鼠標像素移動更新）。

CSS：

.divhover:hover { 
    background-color: hsla(0, 100%, 100%, 0.0); 
}

更新：如果你最終的目標是簡單地變灰的文字，直到你將鼠標懸停在它，那麼你可以試試這個：

Working Demo

HTML：

<div class="hover">  
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p> 
</div>

CSS：

.hover { 
    width:500px; 
    height:500px; 
    background-color:#ccc; 
    color:#333; 
    opacity: .5; 
} 

.hover:hover{ 
    opacity: 1; 
}

我想你可能去關於一種奇怪的方式這樣的效果。您可以在包含元素上添加懸停狀態並切換不透明度。

來源

2014-02-07 01:13:36 badAdviceGuy

是的，這工作正常，但它不允許點擊文本和鏈接，P和一個元素。指針事件：無需允許點擊通過「divhover」分類div。這是我遇到的問題= [。 – PLCcory

好吧我認爲我更好地理解了這個問題，您希望text/bg變灰，直到用戶將鼠標懸停在文本上？ – badAdviceGuy

是的，抱歉不清楚。我希望它被朦朧/變灰直到徘徊，然後隱藏自己。這裏是它如何散佈的例子：http://jsfiddle.net/6wU8X/。如果沒有設置pointer-events：none，div中的項目不能被點擊/ higlighted – PLCcory

我不能想出一種方法來做到這一點與CSS。如果你對JavaScript和jQuery開放，如果沒有人提出一個CSS解決方案，這是一個回落。

類添加到父DIV：

<div class="parent" style="width:500px; height:500px; background-color:#ccc; color:#333;z-index:10"> 

<div class="divhover" style="width:500px; height:500px; position:absolute;"> 
</div> 

    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p> 
</div>

包括jquery並添加下面的腳本：

$(document).ready(function(){ 

    $(".divhover").mouseover(function(){ 
     console.log("Over"); 
     $(this).hide(); 
     } 
    ); 

    $(".parent").mouseleave(function(){ 
     console.log("out"); 
     $(".divhover").show(); 
    }); 

});

看到它在這裏的行動：http://jsfiddle.net/6wU8X/2/

希望有人來了儘管有CSS解決方案！

來源

2014-02-07 05:31:29

非常感謝。我仍然喜歡css解決方案，因爲我有一種感覺是可能的。但是，是我欣賞的一個工作解決方案，可能會用於我稍後需要的內容。 =] – PLCcory

CSS製作div更改不透明度，當盤旋時的亮度

回答

相關問題