使用鼠标悬停在div上以改变该div内部的所有元素

Question

事先请原谅，因为这似乎涉及到对CSS和可能也是Javascript非常基本的理解问题。

我想做的是：想象一个包含h3和p的div。当悬停在div上时，我希望h3和p改变它们的字体粗细。到目前为止，我正在使用此代码来更改悬停在div上时的不透明度和边框，但我真的不知道如何引用div内部的两个元素。很抱歉，但我需要有人用非常简单的术语向我解释。例如，我认为那些在div内部的元素称为子元素，但我甚至不确定...我第一次使用所有HTML/CSS/Java东西，并试图随着进展来弄清楚事情。迄今为止，我找到的教程网站无法解决我的问题，因此发布了这篇文章。

更多背景信息：我正在使用jondesign（Jonathan Schemoul）的"smoothgallery" script，并试图使其符合我的意愿，但如果您不知道它的实际工作方式，那将非常困难。我实现脚本的站点可以在这里找到。

以下是更改悬停时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文件，可以在此处找到。

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

    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的hover功能来更改h3和p的设置？

提前感谢！对于负面批评，我不知道我是否在发布这个问题的方式上犯了错误，甚至不知道我是否可以在这里提问。

- Thomas

Answer 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参考：":hover"。实际上，W3Schools网站是一个刷牙您的CSS的好资源。

- Richard K.

---

你的答案帮了我。但是间接地。我注意到在我的CSS文件中确实写着div.hover，而不是div:hover。 我主要的问题就是我不知道如何寻址特定的子元素。我甚至不知道怎么说。我的意思是，我知道body {}会改变所有的“body”标签，但是当涉及到寻找一个隐藏在许多高级元素中的单个h3时，我有点迷失。就像我所说的，我只是一边摸索，试图理解其他人编写的页面和脚本。现在仅剩下的就是说：谢谢！ - Thomas

啊哈！是的，那就是我解释:hover CSS选择器的提示。很高兴它让你朝着正确的方向前进了！当涉及到像查找特定元素的DOM嵌套位置这样棘手的问题时，我强烈推荐使用类似于Firefox的Firebug和Web Developer Toolbar等工具。两者都允许您将光标悬停在元素上进行检查，并显示这些元素的位置和有效的CSS样式。Firebug还会精确地显示这些有效样式是如何计算的，以及它们是如何通过CSS级联的 - 非常有价值。 - Richard K.

非常好的答案。谢谢。 - Newb

Answer 2

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

.classname :hover *

- Bermjly Team