Используйте наведение на div, чтобы изменить все элементы внутри этого div

Заранее прошу прощения, так как это, кажется, проблема, касающаяся самого базового понимания CSS и, возможно, также Javascript.

Я хочу сделать следующее: представьте себе div, который содержит h3 и p. При наведении курсора на div я хотел бы, чтобы h3 и p изменили свой шрифт. Пока я использую этот код, чтобы изменить прозрачность и границу при наведении курсора на div, но я действительно не знаю, как я могу ссылаться на два элемента внутри div. Я' Мне очень жаль, но мне нужно, чтобы кто-то объяснил мне это очень просто.

Например, я думаю, что эти элементы внутри div называются дочерними, но я даже не уверен в этом ... Я действительно впервые работаю со всем этим HTML / CSS / Java и пытаюсь выяснять вещи по мере того, как я иду. Сайты с обучающими материалами, которые я нашел до сих пор, не смогли решить мою проблему, поэтому этот пост.

Дополнительная справочная информация: я использую сценарий "smoothgallery" от jondesign (Jonathan Schemoul) () и пытаюсь подчинить его своей воле, но это довольно сложно, если вы этого не сделаете. есть хоть какое-то представление о том, как это работает. Сайт, на котором я реализовал сценарий, можно найти здесь .

Здесь идет часть 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 изменяет настройки, например, для h3 внутри этого div,

.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');
    },

У меня вопрос, можно ли вообще изменить настройки h3 и p с помощью функции наведения курсора на основной блок div?

Заранее спасибо! Кроме того, что касается негативной критики, я действительно не знаю, сделал ли я что-то не так в том, как я разместил этот вопрос, и могу ли я даже задать его здесь.

8
задан L84 15 March 2014 в 23:02
поделиться