有沒有辦法將鼠標懸停在一個元素上並影響不同的元素？

我想它是如此簡單，但我知道這是不是：有沒有辦法將鼠標懸停在一個元素上並影響不同的元素？

img { 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
} 

img:hover { 
    #thisElement { 
    opacity: 0.3; 
    filter: alpha(opacity=30); 
    } 
    opacity:1; 
    filter:alpha(opacity=100); 
}

所以，當你將鼠標懸停在IMG，它改變#thisElement的不透明度爲30％，改變的不透明度圖像到100％。有沒有辦法實際做到這一點只使用CSS？

所以這是HTML

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="briefcase.js"></script> 
<link rel="stylesheet" type="text/css" href="taskbar.css"/> 
<link rel="stylesheet" type="text/css" href="briefcase.css" /> 
<title>Briefcase</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
</head> 

<body> 

<div class="mask"></div> 
<div class="float"> 
    <div id="album1">Album Title</div> 
    <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> 

    <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> 

    <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" /> 
</div> 

<div class="gradientTop"></div> 
<div class="gradientBottom"></div> 


</body> 
</html>

這是CSS：

body { 
    font: normal small/3em helvetica, sans-serif; 
    text-align: left; 
    letter-spacing: 2px; 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
} 

div.gradientTop { 
    position: absolute; 
    margin-top: 5px; 
    z-index: 2; 
    width: 206px; 
    height: 30px; 
    float: left; 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0)) 
} 

div.gradientBottom { 
    position: absolute; 
    margin-bottom: 5px; 
    z-index: 2; 
    width: 206px; 
    height: 120px; 
    float: left; 
    bottom: -210px; 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 
} 

div.float { 
    border-right: 1px solid orange; 
    position: absolute; 
    z-index: 2; 
    margin-left: 5px; 
    margin-top: 5px; 
    float: left; 
    width: 200px; 
} 

div.mask { 
    position: relative; 
    z-index: 1; 
    margin-top: 5px; 
    float: left; 
    width: 206px; 
    height: 805px; 
    background-color: white; 
} 

img.left { 
    z-index: inherit; 
    margin-bottom: 3px; 
    float: left; 
    width: 200px; 
    min-height: 200px; 
    /* for modern browsers */ 
    height: auto !important; 
    /* for modern browsers */ 
    height: 200px; 
    /* for IE5.x and IE6 */ 
    opacity: 0.4; 
    filter: alpha(opacity=40) 
} 

img.left:hover + #album1 { 
    opacity: .4; 
} 

img.left:hover { 
    opacity: 1.0; 
} 

#album1 { 
    z-index: 2; 
    width: 200px; 
    color: white; 
    text-align: center; 
    position: absolute; 
    background: orange; 
    top: 70px; 
}

來源

2011-07-29 Marlon

相關：http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements –

用CSS來做到這一點的唯一方法是，如果因素影響或者是後代或相鄰兄弟。

在後代的情況下：

#parent_element:hover #child_element, /* or */ 
#parent_element:hover > #child_element { 
    opacity: 0.3; 
}

將適用於元素如：

<div id="parent_element"> 
    <div id="child_element">Content</div> 
</div>

對於相鄰的兄弟姐妹：

#first_sibling:hover + #second_sibling { 
    opacity: 0.3; 
}

這對於加價工作如：

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

在兩種情況下在選擇後者元件是所選擇的一個。

鑑於你的僞代碼示例，你可能想是這樣的：

img:hover + img { 
    opacity: 0.3; 
    color: red; 
}

JS Fiddle demo。

來源

2011-07-29 00:20:01

嘿謝謝！我會試一試！ – Marlon

我嘗試了這樣： img.left：懸停+＃album1 { 不透明度:.4; } img.left：hover { opacity：1.0; } ＃album1是img元素上方顯示的div元素。它沒有達到預期的效果，並繼續像以前一樣運作。你有什麼建議？ – Marlon

我強烈建議編輯您的問題（點擊'編輯'鏈接），並將您網頁相關部分的html標記添加到您的問題中。這樣我可以看到問題可能是什麼。值得注意的是，'+（鄰接兄弟選擇器）只能用於選擇出現在***＃'first_sibling'之後的標記***中的元素（'＃second_sibling'）。 –

我知道你可能尋找做你想要的東西的純CSS的方式，但我建議你使用HTML + CSS + JS的精彩MVC結構，他們是。

HTML是你的模型，包含數據
CSS您的看法，定義頁面應該如何看
JS是你的控制，如何控制模型和視圖交互。

它應該被利用這裏的控制方面。您想要控制用戶交互項目的視圖。這是究竟是什麼是JS的意思。

使用非常小的JavaScript，當img懸停時，您可以開啓或關閉#thisElement類。它肯定會擊敗CSS選擇器遊戲，儘管我會理解你是否只願意接受純CSS的答案。

來源

2011-07-29 00:26:50 zzzzBov

不，我同意你在這種情況下js可能會更好，但唯一的問題是......我不知道js。我目前正在學習jquery，我想要一個工作頁面在幾天內向一些投資者演示。 – Marlon

這是一個MVC結構是矯枉過正和一種脫離主題:) –

有沒有辦法將鼠標懸停在一個元素上並影響不同的元素？

回答

相關問題