如何讓每個元素完全獨立於CSS？

Question

我有兩個圖像與他們的文字。 當我去到一個圖像時，該圖像的文本應該消失。

我寫的代碼是好的，工作得很好。

<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" /> 
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3> 
<div> 
<div class="sidebarimage"> 
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples"> 
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3> 
</a> 
<div> 

的CSS：

.sidebarimage, .sidebarimagesupermsg { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

.h3sidebarimage, .h3sidebarimagesupermsg { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    width: 100%; 
} 
.h3sidebarimage span, .h3sidebarimagesupermsg span { 
    color: white; 
    font: bold 22px/45px Helvetica, Sans-Serif; 
    letter-spacing: 2px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.5); 
    padding: 10px; 
} 
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer { 
    padding:0 5px; 
} 
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg { 
     visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
} 

請在這裏看到的演示： http://jsfiddle.net/pikk/7dmzd7yc/

但是它工作正常爲1倍的圖像。但是，如果我將鼠標懸停在2張圖片上，也會從1張圖片中消失。這是錯誤的。

由於我在側邊欄中會有很多類似的圖像，因此我不想爲每個圖像複製CSS代碼。所以我想知道是否有一個解決方案只允許我保留一份css代碼。

我想保留儘可能少的CSS代碼。

感謝

Answer 1

的問題是，你不關閉你的包裹<div>標籤。這應該工作：

<div class="sidebarimagesupermsg"> 
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" /> 
    <h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3> 
</div> 
<div class="sidebarimage"> 
    <a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples"> 
     <h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3> 
    </a> 
</div> 

這是更新jsFiddle。

Answer 2

除了上面的@ JCOC611的回答（關於您的<div>標籤），您還可以通過使用元素標籤而不是每個項目的自定義類來大大簡化您的CSS。

在你的問題你提到：

我不想複製每張圖像的CSS代碼。

就目前而言，您的標記需要爲每個圖像/ h3添加一個選擇器。如果你概括了選擇器，你可以添加一個（理論上）無限的數量而不用觸摸CSS。

查看此updated JS Fiddle爲更簡單的CSS。