There are several SVG images on a webpage that all share the same non-unique ID for

I need help with displaying a hovered icon when hovering over it. I've implemented the following rules

.downloads-documentation__image:hover > svg:nth-child(1) {display:none;}
.downloads-documentation__image:hover > svg:nth-child(2) {display:block;}

The hover effect works on the first item in the list, but it doesn't work as expected on the second item. When I hover over the second item, the hovered icon disappears along with both hovered and non-hovered icons.

When inspecting in dev tools, the hovered element has display:block, but the icon is not visible on hover.

*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
ul,li{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
a{text-decoration:none;color:#00D3FF;}
.downloads-documentation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:0px;margin-right:0px;}
@media only screen and (max-width: 991px){
.downloads-documentation__list{max-width:600px;margin-left:auto;margin-right:auto;}
}
.downloads-documentation__item{position:relative;width:calc(100% / 12 * 3 - 0px * 2);margin-left:0px;margin-right:0px;}
@media only screen and (max-width: 991px){
.downloads-documentation__item{width:calc(100% / 12 * 6 - 0px * 2);margin-left:0px;margin-right:0px;margin-bottom:30px;}
}
@media only screen and (max-width: 575px){
.downloads-documentation__item{width:calc(100% / 12 * 12 - 0px * 2);margin-left:0px;margin-right:0px;}
}
.downloads-documentation__item::before,.downloads-documentation__item::after{content:'';background-color:rgba(36, 171, 146, 0.3);position:absolute;width:1px;height:60px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
@media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
@media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
.downloads-documentation__item::before{left:0;}
@media only screen and (max-width: 575px){
.downloads-documentation__item::before{display:none;}
}
.downloads-documentation__item::after{right:0;}
@media only screen and (max-width: 480px){
.downloads-documentation__item::after{bottom:-18px;top:auto;right:auto;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:2px;width:100%;max-width:6rem;}
}
@media only screen and (min-width: 992px){
.downloads-documentation__item:first-child:before{display:none;}
.downloads-documentation__item:last-child:after{display:none;}
}
@media (min-width: 576px) and (max-width: 991px){
.downloads-documentation__item:nth-child(2n-1):before{display:none;}
.downloads-documentation__item:nth-child(2n):after{display:none;}
}
@media only screen and (max-width: 575px){
.downloads-documentation__item:last-child:after{display:none;}
}
.downloads-documentation__reference{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
@media only screen and (max-width: 991px){
.downloads-documentation__reference{font-size:16px;}
}
.downloads-documentation__image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90px;height:80px;margin-bottom:20px;}
.downloads-documentation__image svg{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg:nth-child(1){display:block;}
.downloads-documentation__image svg:nth-child(2){display:none;}
.downloads-documentation__image:hover{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image:hover svg:nth-child(1){display:none;}
.downloads-documentation__image:hover svg:nth-child(2){display:block;}
<ul class="downloads-documentation__list">
                            <li class="downloads-documentation__item">
                    <a class="downloads-documentation__reference" id="item_4" href="" target="_blank">
                        <div class="downloads-documentation__image">
                            <svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
    <g fill="#05E2C2" fill-rule="nonzero">
        <path d="M69.149 10H12.85C11.28 10 10 11.295 10 12.887v37.346c0 1.592 1.28 2.887 2.851 2.887h19.177l-1.42 5.037H26.44a.916.916 0 0 0-.91.921c0 .51.408.922.91.922H55.56c.503 0 .91-.413.91-.922a.916 (.*)

css

Answer №1

Your issue lies with the way your filters are defined within the <svg> and <defs>. It appears that naming them all the same is causing a problem. Try renaming each filter to something unique like #a, #b, #c, and so on. This should resolve the issue you are experiencing. The reason the first SVG works and the others do not is because the filter named a is already defined, causing the browser to fail when trying to fetch it. Check out this demo for more clarity: https://jsfiddle.net/wfhv2b31/ (note that in the demo, I renamed the second and third filters but not the fourth, which is why the last SVG does not work as expected).

Answer №2

I have implemented a similar feature on hypergiant.com. For the second SVG child, you need to adjust its position slightly. I believe using the CSS property opacity instead of display will resolve your issue.

*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
ul,li{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
.downloads-documentation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:0px;margin-right:0px;}
@media only screen and (max-width: 991px){
.downloads-documentation__list{max-width:600px;margin-left:auto;margin-right:auto;}
}
.downloads-documentation__item{position:relative;width:calc(100% / 12 * 3 - 0px * 2);margin-left:0px;margin-right:0px;}
@media only screen and (max-width: 991px){
.downloads-documentation__item{width:calc(100% / 12 * 6 - 0px * 2);margin-left:0px;margin-right:0px;margin-bottom:30px;}
}
@media only screen and (max-width: 575px){
.downloads-documentation__item{width:calc(100% / 12 * 12 - 0px * 2);margin-left:0px;margin-right:0px;}
}
.downloads-documentation__item::before,.downloads-documentation__item::after{content:'';background-color:rgba(36, 171, 146, 0.3);position:absolute;width:1px;height:60px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
@media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
.downloads-documentation__item::before{left:0;}
@media only screen and (max-width: 575px){
.downloads-documentation__item::before{display:none;}
}
.downloads-documentation__item::after{right:0;}
@media only screen and (max-width: 480px){
.downloads-documentation__item::after{bottom:-18px;top:auto;right:auto;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:2px;width:100%;max-width:6rem;}
}
@media only screen and (min-width: 992px){
.downloads-documentation__item:first-child:before{display:none;}
.downloads-documentation__item:last-child:after{display:none;}
}
@media (min-width: 576px) and (max-width: 991px){
.downloads-documentation__item:nth-child(2n-1):before{display:none;}
.downloads-documentation__item:nth-child(2n):after{display:none;}
}
@media only screen and (max-width: 575px){
.downloads-documentation__item:last-child:after{display:none;}
}
.downloads-documentation__reference{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
@media only screen and (max-width: 991px){
.downloads-documentation__reference{font-size:16px;}
}
.downloads-documentation__image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90px;height:80px;margin-bottom:20px;}
.downloads-documentation__image svg{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg{display:block;}

.downloads-documentation__image:hover{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg + svg{opacity:0; position:absolute; left:0; right:0; top:-39px; bottom:0; margin:auto;}
.downloads-documentation__image:hover > svg:first-child{opacity:0;}
.downloads-documentation__image:hover svg + svg{opacity:1;}
<ul class="downloads-documentation__list">
    <li class="downloads-documentation__item">
        <a class="downloads-documentation__reference" id="item_4" href="" target="_blank">
            <div class="downloads-documentation__image">
                <svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
                    ...
                </svg>
                Desktop Wallet App
            </a>
        </li>
        ...
    </li>
</ul>

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

Is there a way to customize the text color highlight for a specific react component only?

I'm working with React and need to adjust the text highlight color. Initially, I tried this approach: Highlight.css ::selection { background:#fbc308; color: black } somecomponent.tsx import './highlight.css' However, this ende ...

cssreactjstypescriptjsxhighlight

Raising css properties using jquery

Is there a way to adjust CSS values using jQuery? I am looking to specifically increase values like top and left, but my current attempt is not producing the desired outcome: var left = 5; $(.object).css("left" + 5); The challenge I am facing is that I ...

jquerycss

What are some more efficient methods for implementing page location detection with Angular directives?

My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site. Experience it yourse ...

javascriptjqueryhtmlcssangularjs

I'm experiencing difficulties with JS on my website. Details are provided below – any suggestions on how to resolve this issue

Can someone help me with a web project issue I'm facing? Everything was going smoothly until I tried to add some JS for dynamic functionality. However, when I attempt to access my elements by tag name, ID, or class, they always return null or undefine ...

javascripthtmlcss

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

cssreactjsantdant-design-proant-design-vue

Is it possible to modify the CSS injected by an Angular Directive?

Is there a way to override the CSS generated by an Angular directive? Take, for instance, when we apply the sort directive to the material data table. This can result in issues like altering the layout of the column header. Attempting to override the CSS ...

javascripthtmlcssangulartypescript

Applying absolute positioning to the router-outlet element in Angular2 using CSS

I am working on a website with the following basic layout: <nav> Nav content here </nav> <router-outlet></router-outlet> I have a component that is being displayed in the router outlet, but I want it to appear on top of ...

cssangular

What is the best way to alter the color of the text cursor using html/css?

I'm a beginner when it comes to HTML and CSS, so my knowledge about them is quite limited. I recently encountered an issue where my text cursor disappears when the background-color of a <div> element is dark. Here's an example: <style&g ...

htmlcss

My content is unselectable due to grid overlap and z-index conflict

I'm currently working on coding a portfolio and need some assistance with creating a nav bar within my grid layout. The main challenge I'm facing is trying to have two main sections - a nav bar and the main content, where the content scrolls vert ...

htmlcsscss-grid

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide c ...

javascriptjqueryhtmlcss

Leverage the Width of a Nested Row within Foundation Framework

Here's a different layout option with a sidebar <div class="row"> <div class="main-content columns small-6> {main content} </div> <div class="columns small-6> {sidebar} </div> </div> And here is a ...

csszurb-foundation

CSS Problem with Custom Buttons on jQuery Mobile

Struggling with CSS and jQuery Mobile here. I'm attempting to insert custom icons into buttons, but the code isn't cooperating. You can view the page at: Visit Website An interesting quirk - when you load the site in Firefox and click "Edit CSS ...

cssbuttonjquery-mobileimagebutton

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

cssgoogle-chromezoominglessribbon

How to remove an event listener that was added within a function in JavaScript?

I am encountering an issue while trying to remove an event listener that was created inside a function. Oddly enough, it works perfectly when I move the event listener outside of the function. See the example below: <body> <div id='myDiv&apo ...

javascripthtmlcssevent-listener

If the div is devoid of content, then remove the class

<div class="slider">content goes here</div> <div id="slider-2" class="active inactive">also some content here</div> <script type="text/javascript"> function checkEmpty( element ){ return !$.trim(element.html()) ...

javascriptjqueryhtmlcss

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

"Trouble in managing heading tag within column due to overflowing instead of adjusting

I have been working on designing a simplistic calendar that displays two weeks with time blocks. While I have created a template for it, I am encountering an issue where the text in the time blocks is overflowing outside their container. https://i.sstatic ...

htmlcssbootstrap-4

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element