在悬停时定位不同的div？

Question

我需要知道是否可以在选择器中定位不同的元素，例如：'当我将鼠标悬停在此元素上时，更改此OTHER元素';类似的东西：

#gallery li:hover {
   h2 {display:block}
}

所以在上面的例子中，我试图说当我将鼠标悬停在#gallery div上时，h2元素将显示为块。

CodePen：http://codepen.io/sad_muso/pen/JKdBox

非常感谢你的帮助

Answer 1

请参阅您编写的css无效，因为您可以使用css属性，但您无法定义任何其他元素。

但是，有一些选择器在css中有{}，+。

假设html是这样的

~

然后在li悬停时，您可以通过对这样的子div应用css来在<ul> <li> <h2>...</h2> </li> </ul> 中执行某些操作。

h2

  

一个简单的空格定义li:hover h2{ color:red; } 是h2的子元素。

假设html就像这样

<li>

然后您可以使用此css在<ul> <li>...</li> <h2>...</h2> </ul> 上h2上执行某些操作

li

  

li:hover + h2{ color:red; } 定义+位于h2

旁边

这些是使用css在不同元素上编写内容的一些示例。

但如果这不符合您的要求，那么唯一的解决方案就是使用jquery。在jquery中，编写的元素在哪里可以做到这一点并不重要

li

  

在上面的回答中，我使用$('li').hover(function(){ $('h2').css('color','red'); }); 作为<h2>的孩子只是为了给你一个关于css规则的例子，但对于有效的html，你不能使用<ul>作为<h2>的直接孩子。

Answer 2

不确定我是否理解你的需要，但我想你需要这个：

#gallery:hover h2{
  display:block
}

另请注意，您可以在css中使用ID #或类.。当你的css代码中有#gallery时，你正在使用ID，ID应该是唯一的，每个元素只能有一个ID，而你可以在一个页面上有更多的类，所以如果你使用.gallery那就是上课。

另请注意，在HTML中，要使用ID，它应如下所示：

<div id="gallery"></div>

和这样的课程：

<div class="gallery"></div>

以下是阅读更多相关信息的好链接：ID vs class