Java-скрипт парящих эффектов, реагирующих вместе

Question

Я все еще новичок в кодировании, и я учусь на ходу.В настоящее время я пытаюсь создать свою первую веб-страницу и попал в ловушку.

Я получил некоторые эффекты наведения мыши в W3school и применил их к двум ссылкам на кнопки изображений.Я сделал две разные записи «Raw HTML» в двух разных столбцах.Когда я загружаю веб-страницу, кнопки всегда реагируют вместе.Если я наведу курсор мыши на одно изображение, эффект другого изображения срабатывает.У меня было нечто похожее, когда у меня было две галереи авто-воспроизведения, и когда я помещал их обе на страницу, они конфликтовали друг с другом.

Какая логика кодирования мне нужна, чтобы иметь возможность разделять элементы?

Вот этот сайт: http://centralia2050.dreamhosters.com/gallery-links/

Answer 1

Код, отвечающий за эффект зависания, выглядит следующим образом:

.container:hover .middle {
    opacity: 1;
}

По сути, это говорит: при наведении на элемент с классом .container установите свойство opacity всех дочерних элементов, которыеимейте класс .middle до 1.

Поскольку существует элемент .container, который содержит оба ваших .middle элемента, для обоих из них непрозрачность устанавливается равной 1 при наведении курсора на этот .container.

Решением вашей проблемы было бы использование псевдокласса :hover в селекторе, который задает элементы, содержащие только один элемент .middle.

Что вы, вероятно, ищете, так этоДобавляйте элементы .middle только при наведении курсора на элементы #gallery1 и #gallery2, чтобы вы могли изменить код следующим образом:

#gallery1:hover .middle, #gallery2:hover .middle {
    opacity: 1;
}

Еще лучше создать класс .gallery-container и применитьэто к элементам #gallery1 и #gallery2.Затем используйте следующий фрагмент:

.gallery-container:hover .middle {
    opacity: 1;
}