Example How can I correctly implement the change of the background of the parent block (marked with dotted lines) when hovering the cursor over the blue circle? It is suggested to make a general background picture with separate sections of modified areas for hover mode of parent blocks. How to correctly bind circles and parent backgrounds?

The point is that when you hover on the background there are changes. Initial Markup:

<ul class="picture"> <li class="block-link1"> <a href="#"> <img class="icon-link" src="" /> </a> </li> <li class="block-link2"> <a href="#"> <img class="icon-link" src="" /> </a> </li> <li class="block-link2"> <a href="#"> <img class="icon-link" src="" /> </a> </li> </ul>

  • Add your code. - MihailPw

2 answers 2

Css option

 * { padding: 0; margin: 0; box-sizing: border-box; } .picture { height: 100vh; position: relative; } .picture-link { position: absolute; top: 50%; left: 0; z-index: 99; width: 50px; height: 50px; line-height: 50px; margin-top: -25px; background: #00f; text-align: center; color: #fff; border-radius: 50%; font-size: 10px; transition: .3s; } .picture-link:nth-of-type(2) { left: 50%; margin-left: -25px; } .picture-link:nth-of-type(3) { left: auto; right: 0; } .picture-link:hover { background: tomato; } .picture-image-1 { background-image: url(http://frederictoncrc.com/new/img/slider/background1.jpg); } .picture-image-2 { background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4xNwMCTfSlR9FTehxEV51nJ4SNOKwfURcQj_2_iueAXX0u2b); } .picture-image-3 { background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToVzpCM0crGK5g9ErwxtlHwv9RAUBwcjWHYjmVGfYf36D4zNotBA); } .picture-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-color: #ccc; background-size: cover; opacity: 0; transition: opacity .3s; } .picture-image-1, .picture-link:nth-of-type(1):hover~.picture-image-1, .picture-link:nth-of-type(2):hover~.picture-image-2, .picture-link:nth-of-type(3):hover~.picture-image-3 { opacity: 1; } 
 <div class="picture"> <a href="#" class="picture-link">link 1</a> <a href="#" class="picture-link">link 2</a> <a href="#" class="picture-link">link 3</a> <div class="picture-image picture-image-1"></div> <div class="picture-image picture-image-2"></div> <div class="picture-image picture-image-3"></div> </div>

  • Thank! Question: .picture-link: nth-of-type (1): hover ~ .picture-image-1 does it work I understand not all browsers? - Sylon
  • '~' works on ie7 inclusive; nth-of-type (1) - by ie9 inclusive. This example will work on ie9 inclusive. - soledar10
  • An interesting trick! And in other Edge, Opera, Firefox? - Sylon
  • Let it work in all modern browsers - soledar10
  • one
    right neighbors: all .picture-image at the same level of nesting, which go after .picture-link. But because we don’t need to select all the images when hovering over the link - we add the nth-of-type to specifically indicate what we should choose when hovering. Yes, if the links are placed in a block (direct parent), and the images will be outside this parent, this option will not work. - soledar10

If I understand correctly, then you should use. .hover() :

 $(".link").hover( e => { $(e.target).parent().css("background-color", "yellow"); }, e => { $(e.target).parent().css("background-color", "black"); }); 
 .dynamic-background { background-color: black; width: 200px; height: 200px; } .link { background-color: white; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dynamic-background"> <a class="link">Link</a> </div>

  • Thank you And in this version, I can use a single image with all the variations of the background, and instead of "background-color", "black" will indicate the position of the desired area? This option is needed (use of the map image) I can not find how this is done, although I often see that they are using this technique. - Sylon
  • @Agestor add your code, including styles and links to the required images - MihailPw
  • Please tell me the method (part of the code), then I will include the finished template in the question, I just need to draw maps in Photoshop. - Sylon