如何使HTML元素對使用css的其他元素產生影響

我有兩個元素集合，我想讓它們相互依賴（彼此綁定）一方面我在導航欄中有一些文本鏈接，另一方面我有一些引用相同鏈接的元素。這些圖像具有動畫效果，如下所述（在懸停圖像時發生動畫）。如何使HTML元素對使用css的其他元素產生影響

我想要實現以下行爲：將鼠標懸停在導航欄中的鏈接上時。酒吧，我想激活對圖像的懸停效果。 ¿這可能沒有jQuery？

這是動畫元素

.view-first img { 
    transition: all 0.2s linear; 
} 
.view-first .mask { 
    opacity: 0; 
    background-color:rgba(116,89,47,0.8); 
    transition: all 0.4s ease-in-out; 
} 
.view-first h2 { 
    transform: translateY(-100px); 
    opacity: 0; 
    transition: all 0.2s ease-in-out; 
} 
.view-first p { 
    transform: translateY(100px); 
    opacity: 0; 
    transition: all 0.2s linear; 
} 
.view-first a.info{ 
    opacity: 0; 
    transition: all 0.2s ease-in-out; 
} 
.view-first:hover img { 
    transform: scale(1.1); 
} 
.view-first:hover .mask { 
    opacity: 1; 
} 
.view-first:hover h2, 
.view-first:hover p, 
.view-first:hover a.info { 
    opacity: 1; 
    transform: translateY(0px); 
} 
.view-first:hover p { 
    transition-delay: 0.1s; 
} 
.view-first:hover a.info { 
    transition-delay: 0.2s; 
}

的風格這是導航元素

<nav><ul> 
    <li><a href="http://users.dsic.upv.es/~margomez/">DSIC</a></li> 
    <li><a href="rna/tutorial/RNA_marcos.html">RNA</a></li> 
    <li><a href="ares/index.php">De Ludo Bellico</a></li> 
</ul></nav>

這對於具有動畫效果的圖像之一的標記的標記

<div class="view view-first"> 
    <img src="images/animage.png" /> 
    <div class="mask"/> 
    <div class="content"> 
     <h2>Name</h2> 
     <p>Description</p> 
     <a href="ares/index.php" class="info">Take me there!</a> 
    </div> 
</div>

因此，當鼠標懸停在導航欄中的元素上時，我想將t他在相關的「查看」元素中的動畫

對於我所讀到的，似乎行爲可以通過使用jQuery（或js）來實現。但是，是否可以使用純html和css達到相同的效果？怎麼樣？

下圖顯示了我的頁面佈局。當在導航欄的元素中以藍色懸停時，我想在下面的圖片中激發一個動畫。 screenshot of the layout

來源

2013-07-01 magomar

究竟是什麼問題？所需結果的屏幕截圖會更容易 – Sowmya

我改寫了我的問題，試圖更好地解釋它。 – magomar

還添加了截圖，它不顯示動畫效果，但沒關係，它按預期工作。我希望現在更清楚。 – magomar

嚴格的解答是否，當您將鼠標懸停在元素y上時，不可能讓任何元素x運行元素y的動畫。但是，你可以在下列情況下使用純CSS：

1）你的聚焦元素是.view-first

.y:hover .view-first { ... }

2）你的焦點元素是相鄰到.view-first

.y:hover + .view-first { ... }

一個父

3）您關注的元素是一般兄弟.view-first

.y:hover ~ .view-first { ... }

有趣的是，CSS4目前的建議包括增加了一個「主題選擇」，它允許你設置使用!在你選擇的「主題」，因而在DOM選擇向上的。（見current W3C spec - 感謝Alohci的鏈接）。這對於這種情況也是有用的，但是仍然不允許你選擇「任何東西」，這些元素必須以某種方式相關。

編輯

Mr. Alien指出，使用:target僞類可能是有用的，如果你要允許點擊的元素。比方說，你有你的HTML作爲

<a href="#spin">Start Spin</a> 
<div id="spin" class="view-first"></div>

然後你可以使用目標引發旋轉，通過使你的CSS爲：

.view-first:target { ... }

雖然我不知道如果這能幫助你太多。

來源

2013-07-01 09:41:49

你忘記'：target';） –

他要求懸停事件，設置目標他必須點擊某件事物。 –

哦，是的，我的不好:)好的答案，將upvote你 –

你可以試試這個：

.view-first { opacity: 0; 
/*more properties here*/} 
.myDiv:hover ~ .view-first{ 
    -webkit-animation: boxanimation 1.5s; 
    opacity: 1; 
    -webkit-transition: all 0s; 
    -webkit-animation-fill-mode: initial; 
/*more properties here*/}

這將爲CHROM和safary工作，爲更多的broser可以設置爲Firefox的-moz，和-o歌劇

來源

2013-07-01 09:41:36

如何使HTML元素對使用css的其他元素產生影響

回答

相關問題