在 div 上使用悬停来更改该 div 内的所有元素

Posted 2023-05-08

【中文标题】在 div 上使用悬停来更改该 div 内的所有元素

【英文标题】：Use hover on div to change all elements inside that div

【发布时间】：2011-07-28 17:32:54

【问题描述】：

我的借口提前，因为这似乎是一个关于 CSS 的基本理解的问题，也许还有 javascript。

我想要做的是：想象一个包含 h3 和 p 的 div。在 div 上悬停时，我希望 h3 和 p 更改它们的字体粗细。到目前为止，我在这里使用此代码来更改悬停在 div 上的不透明度和边框，但我真的不知道如何引用 div 内的两个元素。真的很抱歉，但我需要有人用非常简单的语言向我解释。

例如，我认为 div 中的那些元素称为子元素，但我什至不确定...我真的是第一次使用所有 html/CSS/Java 的东西，并尝试在我前进的过程中弄清楚事情。到目前为止我发现的教程网站无法解决我的问题，因此这篇文章。

更多背景信息：我正在使用 jondesign (Jonathan Schemoul) () 的 "smoothgallery" script，并试图按照我的意愿使用它，但如果你不知道它实际上是如何工作的，那将非常困难.我在其中实现脚本的站点可以找到here。

这是改变悬停时 div 的 CSS 部分：

.jdGallery .gallerySelector .gallerySelectorInner div.hover
    border: 1px solid #89203B;
    border-left: 0.8em solid #89203B;
    background: url('../../images/teaserBox_bg.jpg') no-repeat;
    background-size: 100% 100%;
    filter:alpha(opacity=1);
    -moz-opacity:1;      /
    -khtml-opacity: 1;
    opacity: 1;

CSS 文件中的此条目会更改设置，例如那个div里面的h3，

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
  

您可能还想查看生成这些类的 .js 文件，它可以在 here 找到。

这可能是这里最重要的部分：

    createGalleryButtons: function () 
            var galleryButtonWidth =
                    ((this.galleryElement.offsetWidth - 30) / 2) - 14;
            this.gallerySet.each(function(galleryItem, index)
                    var button = new Element('div').addClass('galleryButton').injectInside(
                            this.gallerySelectorInner
                    ).addEvents(
                            'mouseover': function(myself)
                                    myself.button.addClass('hover');
                            .pass(galleryItem, this),
                            'mouseout': function(myself)
                                    myself.button.removeClass('hover');
                            .pass(galleryItem, this),
                            'click': function(myself, number)
                                    this.changeGallery.pass(number,this)();
                            .pass([galleryItem, index], this)
                    ).setStyle('width', galleryButtonWidth);
                    galleryItem.button = button;
                    var thumbnail = "";
                    if (this.options.showCarousel)
                            thumbnail = galleryItem.elements[0].thumbnail;
                    else
                            thumbnail = galleryItem.elements[0].image;
                    new Element('div').addClass('preview').setStyle(
                            'backgroundImage',
                            "url('" + thumbnail + "')"
                    ).injectInside(button);
                    new Element('h3').set('html', galleryItem.title).injectInside(button);
                    new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
            , this);
            new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
    ,

所以我的问题是，是否可以通过使用主 div 上的悬停功能来更改 h3 和 p 设置？

提前致谢！同样对于负面批评，我真的不知道我发布这个问题的方式是否做错了，我什至可以在这里提问。

【参考方案1】：

你让这种方式变得比它需要的更复杂。无需 Javascript 即可执行此操作。假设您有以下内容：

<div class="container">
    <h3>This is a header</h3>
    <p>This is a paragraph</p>
</div>

所以你有一个容器，有一个标题和段落。假设您希望标题具有正常重量，而段落通常为红色，整个内容周围有一个填充框。以下是您的风格：

.container  border: 1px solid black; padding: 10px; 
.container h3  font-weight: normal; 
.container p  color: red; 

当您将鼠标悬停在 上时，您希望段落和标题以粗体显示并且框边框变为蓝色。将此添加到您的样式表（或 <style> 块）在上面的 CSS 中：

.container:hover  border-color: blue; 
.container:hover h3  font-weight: bold; 
.container:hover p  font-weight: bold; 

请注意，您可以节省一点空间，并通过将<h3> 和<p> 样式用逗号组合成一行来使其更简洁，因为它们是相同的。整个事情现在看起来像这样：

.container  border: 1px solid black; padding: 10px; 
.container h3  font-weight: normal; 
.container p  color: red; 

.container:hover  border-color: blue; 
.container:hover h3, .container:hover p  font-weight: bold; 

请记住，“CSS”中的“C”代表“级联”：样式在两个层次结构中向下级联（也就是说，父元素的样式也适用于子元素，除非它具有默认样式，例如边距或其他） , 并在样式表中向下 - 这意味着您在其他样式之后定义的样式将在它们应用于同一元素时覆盖它们。

CSS 中的 ":hover" 选择器几乎可以用在任何东西上，只有极少数例外。我经常将它们用于无 Javascript 的下拉菜单。你可以在这里找到更多关于 ":hover" CSS 选择器的信息：W3Schools CSS reference on ":hover"。事实上，W3Schools site 是一个很好的资源，可以用来复习你的 CSS。

【讨论】：

嗯，你的回答对我有帮助。而是间接的。我注意到在我的 CSS 文件中它实际上是 div.hover，而不是 div:hover。我的主要问题是我不知道如何处理某些子元素。我什至不知道该怎么说。我的意思是，我知道 body 改变了标签“body”的所有内容，但是当涉及到隐藏在许多更高级别元素中的单个 h3 时，我有点迷失了。正如我所说，我只是在进行过程中弄清楚一切，试图理解其他人编写的一些页面和脚本。现在剩下的就是说：谢谢！！

啊哈！是的，这就是我解释 :hover CSS 选择器的提示。很高兴它让你朝着正确的方向前进！当涉及到诸如查找特定元素的 DOM 嵌套位置之类的棘手问题时，我无法推荐足够多的工具，例如 Firebug 和 Firefox 的 Web Developer Toolbar。两者都允许您通过将光标悬停在元素上来检查元素，它们会向您显示这些元素的位置以及有效的 CSS 样式。 Firebug 还将准确地向您展示这些有效样式是如何计算的，以及它们是如何通过 CSS 级联下来的——非常宝贵。

很好的答案。谢谢。

【参考方案2】：

因为简短的答案是我们一直喜欢寻找的：

.classname :hover *