Is there a way to detect hovering over SVG elements and trigger transitions on a different SVG element at the same time?

I'm exploring hover animations for specific elements within an SVG using CSS. I have a complex SVG with multiple parts and I want to trigger hover effects on the parent SVG element so that only certain elements inside it animate upon hovering. While I've come across JavaScript solutions on StackOverflow, I'm wondering if this can be achieved purely with CSS.

#SFXBoardContainer:hover {
  transform: translateY(-5%)
} /* Applies hover effect to entire svg and moves everything */

#SContainer:hover {
  transform: translateY(-20%)
} /* Triggers hover effect only on a specific part (e.g. rectangle) */

/* My goal is to detect hover on the whole svg and move the SContainer element */
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="444" height="584" viewBox="0 0 444 584">
  <defs>
    <clipPath id="clip-SFXBoardContainer">
      <rect width="444" height="584"/>
    </clipPath>
  </defs>
  <g id="SFXBoardContainer" clip-path="url(#clip-SFXBoardContainer)">
    <g id="SFXBoard" transform="translate(3 4.5)">
      <g id="SContainer">
        <path id="SPart2" d="M0,438V39A39,39,0,0,1,39,0H399a39,39,0,0,1,39,39V438L219,545Z" transform="translate(0 30)" fill="#a72454"/>
        <g id="SPart1" fill="#ff3680">
          <path d="M 218.9997100830078 519.95751953125 L 22.4999828338623 423.9505920410156 L 22.4999828338623 398.9996643066406 L 22.4999828338623 38.99966049194336 C 22.4999828338623 29.90120697021484 29.90171051025391 22.49911689758301 38.99971008300781 22.49911689758301 L 398.9996948242188 22.49911689758301 C 408.0977172851563 22.49911689758301 415.4994506835938 29.90120697021484 415.4994506835938 38.99966049194336 L 415.4994506835938 331.2477416992188 L 415.4994506835938 423.9505920410156 L 218.9997100830078 519.95751953125 Z" stroke="none"/>
          <path d="M 218.9997100830078 494.9156188964844 L 392.9993896484375 409.90185546875 L 392.9993896484375 331.2477416992188 L 392.9993896484375 44.99907684326172 L 45.00004196166992 44.99907684326172 L 45.00004196166992 398.999755859375 L 45.00004196166992 409.90185546875 L 218.9997100830078 494.9156188964844 M 218.9997100830078 544.99951171875 L 4.341634121374227e-05 437.9994201660156 L 4.341634121374227e-05 398.999755859375 L 4.341634121374227e-05 38.9997444152832 C 4.341634121374227e-05 17.46007537841797 17.4609317779541 -0.0009241265361197293 38.99971008300781 -0.0009241265361197293 L 398.9996948242188 -0.0009241265361197293 C 420.5384826660156 -0.0009241265361197293 437.9993896484375 17.46007537841797 437.9993896484375 38.9997444152832 L 437.9993896484375 331.2477416992188 L 437.9993896484375 437.9994201660156 L 218.9997100830078 544.99951171875 Z" stroke="none" fill="#c62b64"/>
        </g>
      </g>
      <rect id="STextTag" width="291" height="56" rx="2" transform="translate(74 337)" fill="#292c32"/>
      <text id="SSubjectTag" transform="translate(220 378)" fill="#ff3680" font-size="41" font-family="Bahnschrift" font-weight="700"><tspan x="-124.091" y="0">~</tspan><tspan y="0" text-decoration="underline">SFX/MUSIC</tspan><tspan y="0">~</tspan></text>
      <text id="SubjectTag2" transform="translate(220 323)" fill="#292c32" font-size="43" font-family="Bahnschrift" font-weight="600"><tspan x="-27.137" y="0">My</tspan><tspan x="0" y="37"></tspan><tspan x="0" y="74"></tspan><tspan x="-49.519" y="111">Work</tspan></text>
      <path id="SLineDiv" d="M1522.034,1502.031h230.328" transform="translate(-1417.053 -1234.751)" fill="none" stroke="#292c32" stroke-linecap="round" stroke-width="15"/>
      <rect id="SIconCover" width="192" height="158" rx="33" transform="translate(124 72)" fill="#292c32"/>
      <path id="SIcon" d="M1718.36,2621.775h41.561l13.8,13.057,14.615-32.863,18.108,56.674,24.11-80.795,22.731,80.795,16.319-56.674,13.84,32.863,13.353-13.057h57.394" transform="translate(-1610 -2467.263)" fill="none" stroke="#ff3680" stroke-linecap="round" stroke-width="10"/>
    </g>
  </g>
</svg>

In the scenario described above, I am attempting to create hover transitions on the SContainer element within the SFXBoardContainer SVG by detecting the :hover event on the entire SVG element.

csssvghovercss-animations

Answer №1

Illustrated below is a demonstration of a hover selector in <svg>, which triggers a transformation on a <rect> element within the SVG.

svg:hover #r1 {
  transform: scale(1.5);
  transition: transform 1s;
}

#c1:hover {
  stroke: green;
}
<svg xmlns="http://www.w3.org/2000/svg"width="200" viewBox="0 0 10 10">
  <rect x="0" y="0" width="10" height="10" fill="silver" />
  <rect id="r1" x="2" y="2" width="4" height="4" fill="navy" />
  <circle id="c1" cx="5" cy="5" r="4" stroke="red" fill="none" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

javascriptjqueryhtmlcssarrays

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

javascriptjqueryhtmlcssscrollbar

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped

Conceal a designated H2 identifier through the use of either javascript or CSS

We are currently exploring Zendesk for our customer support website, but we have encountered some limitations in terms of customization. Our goal is to remove specific text from the page by utilizing Zendesk's widgets function, which can be implemente ...

javascriptjquerycsszendesk

Displaying Vue.js tooltips in a table when the text gets clipped

I'm currently facing an issue with creating a tooltip in my vue.js document. I attempted to follow this guide from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip in order to create one, but it's not working as expected. Her ...

javascripthtmlcssvue.js

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

The style was declined from being applied due to its MIME type, which was identified as 'text/html'

Currently, I am working on VueJS with Webpack and SCSS. I am facing a problem when attempting to import the SCSS file into the component using the following code: <style type="scss"> @import "/sass/pages/_initial.scss";</style> Upon doing so, ...

cssvue.jssassvuejs2

The dynamic design of the webpage allows for a fluid layout, where the navigation bar smoothly adjusts its position when

I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...

csshtml

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss

Is there a way to expand "row" elements to the left side in Bootstrap?

<div class="container-fluid"> <div class="row"> <!-- Left side --> <div class="col-xl-10 style"> <div class="row" > <div class="col-xl-12 style">Box1< ...

htmlcssbootstrap-4

Lines are showing up on the screen, but their origin within the html or css remains a

While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...

htmlcssbootstrap-4

Integrating dynamic PHP echo strings from a database into an established CSS layout

I am currently exploring PHP and MySQL databases, and I have managed to develop a basic search engine for my website. However, I am facing an issue that I am struggling to resolve: Is there a way to integrate the PHP echo output (search results) into the ...

phphtmlmysqlcss

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

javascriptjqueryhtmlcss

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

I just joined this community and I might have some questions that could be considered too basic. Recently, I've been trying to understand SVG and came across something that left me puzzled. Take a look at this: <svg xmlns="http://www.w3.org/20 ...

csssvg

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

htmlcsssass

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

javascripthtmlcssviewportsticky

Strategizing button placement for maximum profit expansion

I am attempting to design a budget board using Bootstrap 4. Here is what I have done so far, and I want the buttons to look like the image below. I'm clueless on how to achieve this.. Current Output: Desired Output: .btn-warning { border: 1px s ...

cssbootstrap-4

Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS? * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: ...

htmlcss

Add a border to the element if its height exceeds 300 pixels

My web page has a dynamic element with an unpredictable height. As more content is added, the element grows, but I have restricted it with a max-height: 300px;. However, I would like to add a hint to the user when the element reaches its maximum height by ...

htmlcssangularjs

The layout of an HTML and CSS page does not adjust according to the size of the

Having trouble scaling down my HTML and CSS code properly using only %'s and vw's. The entree div and drink div are dynamically populated, making formatting even more challenging. <!DOCTYPE HTML> <html> <link rel="stylesheet" h ...

htmlcss