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

Question

我提前找借口,因为这似乎是一个非常基本的CSS理解问题,也可能是Javascript.

我想要做的是:想象一个包含h3和p的div.在盘旋上我希望h3和p改变它们的字体重量.到目前为止,我在这里使用此代码来改变悬停在div上的不透明度和边框,但我真的不知道如何引用div中的两个元素.我真的很抱歉,但我需要有人以非常简单的方式向我解释.

举例来说,我觉得里面的div这些元素被称为孩子,但我甚至不能确定有关......我真的与所有的HTML/CSS/Java的东西的工作,第一次,并试图搞清楚这些事情当我走的时候.到目前为止我找到的教程网站无法解决我的问题,因此这篇文章.

更多背景信息:我正在使用jondesign(Jonathan Schemoul)的"smoothgallery"脚本()并试图按照我的意愿弯曲它,但如果你不知道它是如何工作的话,那就太难了.我可以在这里找到我实现脚本的网站.

这里是CSS部分,用于更改悬停时的div:

.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上使用悬停功能来改变h3和p设置吗？

提前致谢!同样对于负面批评,我不知道我在发布这个问题的方式上是否做错了,我是否可以在这里问一下.

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; }

将鼠标悬停在鼠标上时,您希望段落和标题以粗体显示,框边框更改为蓝色.将其添加到上面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"选择器几乎可用于任何事情,只有极少数例外.我经常使用它们来获取无Javascript的下拉菜单.你可以在这里找到更多关于":hover"的CSS选择器:W3Schools CSS参考":hover".事实上,W3Schools网站是刷新CSS的一般资源.