Is it possible to modify the ID of an SVG path element by hovering over a different element?

I gave unique IDs to SVG path elements - opacity-1n and opacity-1e. My aim is to make opacity-1e visible when hovering over opacity-1n.

<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
 </g>

#opacity-1n:hover #opacity-1e {opacity: 1;}

#opacity-1e {opacity: 0;}

Other attempts:

#opacity-1n:hover + #opacity-1e {opacity: 1;}

#opacity-1n:hover > #opacity-1e {opacity: 1;}

#opacity-1n:hover ~ #opacity-1e {opacity: 1;}
csssvghover

Answer №1

To solve the issue, simply make the second path-element hidden.

#opacity-1n:hover + #opacity-1e {
  opacity: 1;
}

#opacity-1e {
  opacity: 0;
}
<svg>
  <g id="Layer_1">
    <path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
    <path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
 </g>
</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

Align both the image and text in the center with no space between

How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1 .product-teaser { width ...

htmlcss

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

javascripthtmlcssangularjs

Displaying JSON information in an HTML table with JavaScript

I successfully displayed JSON data in an HTML table. Here is the snippet I used: $("#example-table").tabulator({ height:"300px", fitColumns:true, tooltips:true, columns:[ {title:"Month", field:"Month", sorter:"string"}, {title:"Numbers", ...

javascripthtmlcssjson

Verifying the Compatibility of Linear Gradient in CSS

To verify support for CSS properties such as border-radius, use the following code snippet: if(document.createElement('test').style.borderRadius===''){ //some code } But how can I check for support of linear gradients? The declaration ...

javascripthtmlcsscross-browser

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

htmlcssgoogle-chromefirefox

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart ...

htmlcssflexboxbootstrap-4

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

cssresponsive-design

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

What could be causing my button to pass the event to its parent element?

I've implemented a clever trick within a div, where I have included my own custom "data" indicating what action to take when the user clicks on it. My JavaScript code snippet is as follows (with some code omitted for clarity): $('[data-hqf-swit ...

javascriptjqueryhtmlcss

Adjust the size of flex items to match the size of their container

I'm attempting to design a two-column layout using a flex parent with a height of 100vh. The first column consists of a div containing a heading and a paragraph, while the second column contains a div with an image. I want the flex parent's heigh ...

htmlcss

Using React to set a background image that spans the entire height of the page

I'm trying to display a static image that spans the full height and width of my page, but it's not working as expected. Any ideas on how to fix this issue? You can find the image and code below. import Image from './image.jpg' var con ...

javascriptcssreactjs

Is the button inactive until an action is taken?

In my coding project, I am working with two buttons. I am trying to figure out a way to disable the second button until the first button is clicked. Does anyone have any suggestions on how to achieve this using a combination of JavaScript and CSS? ...

javascriptcssbuttondisabled-input

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

After digging into the documentation and examples on how to customize Material UI styling with styled-components, I successfully applied styling to the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails. However, when attempting ...

javascriptcssreactjsmaterial-uistyled-components

Menu remains open on resizing browser, refusing to close

Welcome to my code snippet: HTML: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8> <title>Responsive Menu</title> <!-- CSS and JS link tags go here --> </body> </html> CSS: ...

javascriptjqueryhtmlcssresponsive-design

What could be causing the input submit in my form to be unresponsive when clicked?

I'm stumped on what's causing the issue. My sign-up form seems to be malfunctioning - when I click the "Complete Registration" button, nothing happens! The form doesn't even submit. Here is the HTML structure: <!DOCTYPE html> <html ...

phphtmlcssforms

Navigation bar fails to expand to the full width of the page

I need assistance with optimizing my website for mobile use. I am facing issues with excess white space on the right side of the navbar. Here is a visual representation of the problem: I have attempted modifying the CSS of the body and nav tags, as well ...

htmlcssbootstrap-4navbar

The circle border-radius is refusing to slide to the center of the screen

I'm having trouble moving the top circle to the center, while the bottom three circles are displaying correctly. I need to adjust the text and icon placement in the circles to be centered. Additionally, I want the layout to be responsive across differ ...

htmlcssbootstrap-4

The browser Internet Explorer fails to recognize the @media screen rule

Currently, I'm focusing on creating a responsive design for a web page. The issue I am encountering involves loading data via ajax to render forms. Strangely, only Internet Explorer seems to think that the width is less than 768px after rendering (thu ...

javascriptcssajaxinternet-explorerjoomla3.0

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context I have been working on a customized autocomplete feature using Angular Material, and I need to adjust the height of the dropdown results box for better visibility. Exploration After conducting some research, I discovered that Angular Material cu ...

javascriptcssangularjsautocompleteangular-material