Используйте hover на div, чтобы изменить все элементы внутри этого div - PullRequest
Новая
       0

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

8 голосов
/ 03 апреля 2011

Заранее прошу прощения, так как кажется, что это проблема относительно базового понимания 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 с помощью функции наведения наосновной див?

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

1 Ответ

23 голосов
/ 03 апреля 2011

Вы делаете этот путь более сложным, чем нужно. Для этого не требуется 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; }

Помните, что «C» в «CSS» означает «каскадный»: стили каскадно переходят в обе иерархии (то есть стиль родительского элемента также применяется к дочернему элементу, если у него нет стилей по умолчанию, таких как поля или что-то еще) и вниз по таблице стилей - это означает, что стили, которые вы определяете после того, как другие переопределят их, если они применяются к тому же элементу.

Селектор ": hover" в CSS может использоваться практически во всем, за очень немногими исключениями. Я использую их регулярно для выпадающих меню без Javascript. Вы можете найти больше о CSS-селекторе ": hover" здесь: Ссылка CSS W3Schools на ": hover" . На самом деле, сайт W3Schools , как правило, является отличным ресурсом для обновления вашего CSS.

...