使用jQuery突出顯示元素時遇到CSS盒子陰影問題

我有一個簡單的JQuery元素選擇器 - 正如您所期望的那樣，移入和移出元素確實會突出顯示。它的工作原理，但我遇到了2個問題，我想請一些幫助（我敢肯定一個CSS專家將在幾秒鐘內解決這個問題!!）：使用jQuery突出顯示元素時遇到CSS盒子陰影問題

1）相鄰元素有時掩蓋突出顯示他們的鄰居（見 1在這fiddle - 我想有紅色陰影出現在DIV 1的所有四邊，而不是隻在那些不接觸鄰居DIV - 我也試過增加一個z-index但它沒有解決它）

2）當一個元素包含一個錨鏈接，其文本的文字包裝到多行上的每一行文本突出顯示 - 理想情況下，我希望整個鏈接被突出顯示（例如見DIV 4在相同的fiddle - 將鼠標懸停在包含3行的鏈接上 - 而不是有3個紅色陰影框，我可以在整個鏈接上獲得1個陰影框嗎？

注：我使用的各種第三方網頁頂部的代碼，所以我不能改變/可伸縮的方式

編輯編輯HTML：

感謝那些在下面回答的人 - 你的解決方案在我的小提琴演示中工作 - 我現在已將這些內容納入我的實際代碼中，但是當我將鼠標懸停在它們上方時，我無法讓圖像「走到前臺」 - 許多圖像仍然只有他們的懸停SHADOW出現在不到4面 - 我的代碼是這樣的（但需要PHP）：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <style> 
     img:hover{ 
      -webkit-box-shadow: 0 0 17px 10px green; 
      -moz-box-shadow: 0 0 17px 10px green; 
      box-shadow: 0 0 17px 10px green; 
      z-index:5555555555; 
      position:relative; 
     } 
</style> 
</head> 

<body> 
<?php 
    echo'<div>'; 
      $url = 'http://www.guardian.co.uk'; 
      $data = file_get_contents($url); 
      echo $data; 
    echo'</div>'; 
    ?> 
</body> 
</html>

來源

2012-09-17 Steve

問題1 - 你只看到三面的邊界，因爲底邊緣是第二框下。它流行到這樣的前 - 這實際上帶來時候徘徊

div:hover {z-index:5; position:relative;}

問題2您的任何兄弟姐妹的div到前面 - 設置鏈接到

display:block;

看到我更新了自己的小提琴

http://jsfiddle.net/FusrG/9/

來源

2012-09-17 12:13:44

查爾斯 - 感謝您對此的幫助 - 我已經將其中的一些內容加入了我的代碼中 - 請參閱上面的原始問題中的編輯內容 - 我仍然無法讓圖像出現在前面（即使它已經運行在小提琴的例子） - 任何想法，我要去哪裏錯了？（謝謝） – Steve

史蒂夫 - 你正試圖將Z索引應用於img - 將其應用於包含div。此外，影子在四面，但第二個盒子覆蓋它;一旦你可以將元素彈出到前面，你會看到它周圍的陰影 - 時間 –

好的，首先，爲什麼不只是在CSS中使用:hover僞選擇器？

div:hover, a:hover 
{ 
    -webkit-box-shadow: 0 0 17px 10px #f51f4c; 
    -moz-box-shadow: 0 0 17px 10px #f51f4c; 
    box-shadow: 0 0 17px 10px #f51f4c !important; 
}

而不是使用JS來做一些CSS內置的東西？

您必須爲.top div指定一個位置和z-index，以便隨時顯示，並將display: inline-block;添加到錨點以便按照預期環繞鏈接。

.sky a 
{ 
    display: inline-block; 
}

http://jsfiddle.net/Kyle_Sevenoaks/FusrG/7/

使用CSS懸停修復陰影：http://jsfiddle.net/Kyle_Sevenoaks/FusrG/11/

來源

2012-09-17 12:10:01 Kyle

您的示例現在在第二個div上具有陰影z-index問題。 – Nope

似乎工作在查爾斯的答案只是使用CSS。 – Nope

是的，這就是我的意思:) – Kyle

使用jQuery突出顯示元素時遇到CSS盒子陰影問題

回答

相關問題