-1

I'm still a newbie to coding, and I'm learning as I go. I'm currently trying to build up my first web page, and I've hit a snag.

I got some hover-over effects from W3school, and applied them to two image button links. I made two different "Raw HTML" entries into two different columns. When i load the webpage, the buttons always react together. If I hover over one image, the other image's effect is triggered. I had something similar where I had two auto-play galleries, and when I put them both on the page, they conflicted with one another.

What coding logic do I need to be able to separate elements?

Here is the site in question: http://centralia2050.dreamhosters.com/gallery-links/

Envelion
  • 1

1 Answers1

0

The code responsible for your hovering effect is the following:

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

This essentially says: When hovering over an element with the class .container, set the opacity property of all child elements that have class .middle to 1.

Since there is a .container Element which contains both of your .middle Elements, both of them have their opacity set to 1 when hovering over that .container.

The solution to your problem would be to use the :hover pseudo-class on a selector that specifies elements which only contain one .middle element.

What you are probably looking for is to fade in the .middle elements only when hovering over your #gallery1 and #gallery2 elements, so you could change the code like so:

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

Even better, create a class .gallery-container and apply it to the #gallery1 and #gallery2 elements. Then use the following snippet:

.gallery-container:hover .middle {
    opacity: 1;
}
Jacob Mellin
  • 323
  • 2
  • 7
  • Thank you, I'm beginning to understand. The desired effect I want is for each element to be independent so when I hover over one, it doesn't activate the effect on the other, and vice versa. This is effectively my problem when I'm trying to create any group of buttons or images on a page. I think what I need to spend time learning about are these "div classes" and how they work. Thank you! – Envelion Sep 13 '18 at 06:22