How to trigger hover event from another element? |
How to trigger hover event from another element? |
Jayde |
Jul 1 2021, 11:38 PM
Post
#1
|
Group: Members Posts: 3 Joined: 1-July 21 Member No.: 28,003 |
Sorry if this is posted in the wrong place. I think it may cover more than one topic.
On my page I have several SVG <path> that draw a little maps. When the user hovers over the maps, the map changes to orange. However, there are also images placed on top of the paths (they are bubbles showing the name of the map). My problem is when the mouse moves over the little images, I'd like the map behind it to stay lit up as orange. So, I'm guessing I'd need to trigger the path's hover event from the image's hover event, but have not idea how to do that in code. Here's a picture of the problem. Thanks in advance for any help. |
Christian J |
Jul 2 2021, 03:21 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
How is the color change done, with CSS alone or javascript?
With javascript you could let the mouseover events on the map or little image call the same color-change javascript function for both. With CSS :hover, you can make the little image a child element of the larger map (if possible with SVG?), but use absolute positioning to place it somewhere else. |
Jayde |
Jul 3 2021, 12:03 AM
Post
#3
|
Group: Members Posts: 3 Joined: 1-July 21 Member No.: 28,003 |
How is the color change done, with CSS alone or javascript? With javascript you could let the mouseover events on the map or little image call the same color-change javascript function for both. With CSS :hover, you can make the little image a child element of the larger map (if possible with SVG?), but use absolute positioning to place it somewhere else. Thank you for replying Christian! The color change is done with CSS. Following your advice I messed around with it and have managed to get things a little better by using IDs and wrapping the little tag image inside an <a> with the SVG <path>. So now the color change fires when I hover over the image, but the image also becomes invisible when not hovered over, inheriting the the behavior from the path. I think I'm close, I just have to work out how to make the image visible when not hovered over. Here is the relative code: CODE <style type="text/css"> #kamakura-map{fill:#FFB408;opacity:0;} #kamakura-map:hover{fill:#FFB408;opacity:1;} </style> <a id="kamakura-map" xlink:href="https://seaside-living-japan.com/kamakura/" > <path d="M633.9,237.3c5.1-10.7,10.1-21,14.9-31.3c0.9-1.9,2-1.2,3.2-0.5c15.6,9.2,32.6,15.8,46.9,27.2 c2.7,2.1,5.8,3,8.9,1.9c3.6-1.3,4.9,0.3,5.8,3.3c1.7,5.9,4.4,7.6,10.2,5.7c5.4-1.7,10.6-3.9,16-5.7c1.6-0.6,2.5-1.6,2.9-3.1 c0.5-1.9,0.6-4,1.3-5.8c1-2.8,0.8-6.9,4.5-7.3c3.3-0.4,9.1,5.8,8.4,9.1c-1.7,9,1.8,15.4,8.8,20.5c1.5,1.1,2.8,2.5,3.8,4 c4.5,7.1,10.9,9.5,19,8.8c5-0.4,10,0.1,15,0.2c1.7,0,3.2,0.1,4.1,2c3,6.3,6.1,12.6,7.1,19.6c1.4,9.6,11,15.5,20.3,12.4 c1.7-0.6,3.4-1.3,5.1-1.9c5.9-2.2,8-1.6,9.6,4.4c3.2,12.6,6,25.2,8.1,38c0.4,2.3-0.7,3-2.7,3c-6.3,0-10.2,3-11.6,9.3 c-0.9,4.1-4.8,5.1-8.1,5.6c-9.5,1.5-18.2,6.5-28.1,6.3c-2.6-0.1-4.4,2.1-4.8,4.5c-1,5.1-4.7,7.4-8.9,8.3 c-8.7,1.9-14.6,7.5-20.2,13.9c-2.2,2.5-4.3,5-7.6,6.6c0.5-4.5-2.3-7-4.8-9.4c-3.8-3.7-7.8-7.3-12.1-10.4c-4.3-3.1-9.7-2.4-14.7-3.1 c-9.1-1.2-13.8,3.4-16.6,11.7c-1.6,4.5-7.3,4.9-10.8,7.6c-4.4,3.4-8,1.7-11.8-0.9c-1.7-1.2-3.7-1.3-5.8-1.1 c-6.9,0.7-13.2-1.3-19.7-3.4c-7.2-2.3-14.8-3.9-22.5-4.2c-7.1-0.3-14.3-3.1-21.1,1.6c-1.4,0.9-3.7-0.2-4.8-1.8 c-1.5-2.1-2.2-4.2-0.9-6.9c3.9-7.9,7.5-15.9,11.4-23.9c2.5-5.1,4.9-10.2,4.6-16.1c-0.3-8.2,5-14.2,7.9-21.2 c2.7-6.4,6.8-9.7,13.7-9.9c5-0.2,9-2.5,12.3-6.6c3.1-3.9,6.6-7.5,10.2-10.9c2.9-2.8,2.1-5.8,1-8.7c-1.2-3-4-1.6-6.2-1.6 c-3.2,0-7.3,2.3-9.3-1c-1.7-2.8,2-5.2,3.4-7.7c2.1-3.5,2.1-6.9-0.3-10.3c-2.3-3.2-4.5-5.1-9.1-3.4c-5.6,2-8.1-0.4-7.9-6.5 c0.2-8.9,0.2-8.9-8.7-10.2C640.5,237.7,637.5,237.6,633.9,237.3z"/> <image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/Tag_kamakura.png" x="690" y="315" width="97" height="37"> </image> </a> Any advice would be appreciated. |
Christian J |
Jul 3 2021, 05:05 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
I don't really know SVG, so I copied some of the HTML from a simpler example on the web:
CODE #kamakura-map { position: relative; width: 190px; height: 160px; cursor: pointer; } #kamakura-map img { position: absolute; top: 55px; left: 45px; opacity: 0; } #kamakura-map:hover img { opacity: 1; } <div id="kamakura-map"> <img src="fujisawa.jpg" width="100" height="50" alt="Fujisawa"> <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> </svg> </div> I don't know how to change the background of the PATH shape with CSS. |
pandy |
Jul 3 2021, 09:55 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Absolutely nothing shows up for me with that code (yes, I added the SVG tags).
BTW IMG doesn't have a href attribute. It's src. And it doesn't have a closing tag. I'm not sure, but i don't think you can put the image inside the SVG like that. Put it after and position it on top of the SVG. I can't try since I can't see the SVG... |
Jayde |
Jul 3 2021, 05:24 PM
Post
#6
|
Group: Members Posts: 3 Joined: 1-July 21 Member No.: 28,003 |
I finally solved it the old school way of imbedding the city tag png into the background image. That way even when their actual <image> elements disappeared with the inherited class :hover behavior, they would still be visible as part of the background. I was reluctant to do it this way at first because I was sure the pixel alignment would mess up, especially when resized, however it turned out to be surprisingly faithful.
Here is the key bits of code for one of the minimap sections: CODE <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 884" style="enable-background:new 0 0 1440 792;" xml:space="preserve"> <style type="text/css"> .minimap{fill:#FFB408;opacity:0;} .minimap:hover{fill:#FFB408;opacity:1;} </style> <image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/seaside-area-map-1.png" x="0" y="0" width="1440" height="884"> </image> {Background Image} <a class="minimap" href="https://seaside-living-japan.com/kamakura/" > <path d="M633.9,237.3c5.1-10.7,10.1-21,14.9-31.3c0.9-1.9,2-1.2,3.2-0.5c15.6,9.2,32.6,15.8,46.9,27.2 c2.7,2.1,5.8,3,8.9,1.9c3.6-1.3,4.9,0.3,5.8,3.3c1.7,5.9,4.4,7.6,10.2,5.7c5.4-1.7,10.6-3.9,16-5.7c1.6-0.6,2.5-1.6,2.9-3.1 c0.5-1.9,0.6-4,1.3-5.8c1-2.8,0.8-6.9,4.5-7.3c3.3-0.4,9.1,5.8,8.4,9.1c-1.7,9,1.8,15.4,8.8,20.5c1.5,1.1,2.8,2.5,3.8,4 c4.5,7.1,10.9,9.5,19,8.8c5-0.4,10,0.1,15,0.2c1.7,0,3.2,0.1,4.1,2c3,6.3,6.1,12.6,7.1,19.6c1.4,9.6,11,15.5,20.3,12.4 c1.7-0.6,3.4-1.3,5.1-1.9c5.9-2.2,8-1.6,9.6,4.4c3.2,12.6,6,25.2,8.1,38c0.4,2.3-0.7,3-2.7,3c-6.3,0-10.2,3-11.6,9.3 c-0.9,4.1-4.8,5.1-8.1,5.6c-9.5,1.5-18.2,6.5-28.1,6.3c-2.6-0.1-4.4,2.1-4.8,4.5c-1,5.1-4.7,7.4-8.9,8.3 c-8.7,1.9-14.6,7.5-20.2,13.9c-2.2,2.5-4.3,5-7.6,6.6c0.5-4.5-2.3-7-4.8-9.4c-3.8-3.7-7.8-7.3-12.1-10.4c-4.3-3.1-9.7-2.4-14.7-3.1 c-9.1-1.2-13.8,3.4-16.6,11.7c-1.6,4.5-7.3,4.9-10.8,7.6c-4.4,3.4-8,1.7-11.8-0.9c-1.7-1.2-3.7-1.3-5.8-1.1 c-6.9,0.7-13.2-1.3-19.7-3.4c-7.2-2.3-14.8-3.9-22.5-4.2c-7.1-0.3-14.3-3.1-21.1,1.6c-1.4,0.9-3.7-0.2-4.8-1.8 c-1.5-2.1-2.2-4.2-0.9-6.9c3.9-7.9,7.5-15.9,11.4-23.9c2.5-5.1,4.9-10.2,4.6-16.1c-0.3-8.2,5-14.2,7.9-21.2 c2.7-6.4,6.8-9.7,13.7-9.9c5-0.2,9-2.5,12.3-6.6c3.1-3.9,6.6-7.5,10.2-10.9c2.9-2.8,2.1-5.8,1-8.7c-1.2-3-4-1.6-6.2-1.6 c-3.2,0-7.3,2.3-9.3-1c-1.7-2.8,2-5.2,3.4-7.7c2.1-3.5,2.1-6.9-0.3-10.3c-2.3-3.2-4.5-5.1-9.1-3.4c-5.6,2-8.1-0.4-7.9-6.5 c0.2-8.9,0.2-8.9-8.7-10.2C640.5,237.7,637.5,237.6,633.9,237.3z"/> <image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/Tag_kamakura.png" x="691" y="316" width="102" height="37"> </image> </a> </svg> This post has been edited by Jayde: Jul 3 2021, 05:25 PM |
Lo-Fi Version | Time is now: 19th April 2024 - 02:49 PM |