css - 在div上使用鼠标悬停可更改该div内的所有元素

我先找个借口，因为这似乎是一个关于CSS甚至Javascript的基本理解的问题。

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

例如，我认为div中的那些元素被称为子元素，但我什至对此不确定。随着我的前进。到目前为止，我发现的教程站点无法解决我的问题，因此，本文发布了。

更多背景信息:我正在使用jondesign的"smoothgallery" script(Jonathan Schemoul)()，并试图将其 flex 到我的意愿，但是如果您不知道它实际上是如何工作的，那将是非常困难的。我在其中实现脚本的网站可以在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设置？

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

最佳答案

您正在使这种方式变得比所需的更加复杂。不需要Java脚本即可执行此操作。假设您具有以下条件:

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

因此，您有一个带有 header 和段落的容器。假设您希望标题的正常粗细，段落通常为红色，并在整个内容周围加上填充框。这是您的样式:

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

将鼠标悬停在上时，您希望段落和标题为粗体，并且框边框变为蓝色。将其添加到上方CSS下方的样式表(或<style>块)中:

.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”选择器几乎可以用于任何事物，只有少数异常(exception)。我经常将它们用于没有Javascript的下拉菜单。您可以在[:hover] CSS选择器中找到更多信息:W3Schools CSS reference on ":hover"。实际上，W3Schools site通常是整理CSS的绝佳资源。

关于css - 在div上使用鼠标悬停可更改该div内的所有元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5531366/