Tips for choosing a sibling element on hover using CSS

I'm having trouble figuring out how to make the rect element change color to purple when the text is highlighted. Right now, only the text color is changing. Is there a way to achieve this using just CSS?

The goal is for the rect to turn purple on hover over the text.

.chart rect {
  //fill: steelblue;
  stroke: black;
}
.x.axis path {
  display: none;
}
text {
  text-anchor: middle;
  alignment-baseline="middle";
}
rect:hover {
  fill: purple;
}
rect ~ text:hover {
  fill: purple
}
<svg class="chart" width="800" height="60>
  <g transform="translate(108.2258064516129,30)">
    <rect width="206.4516129032258" height="29" fill="orange"></rect>
    <text x="103.2258064516129" y="15" dy=".35em">ABB vs BBA</text>
    <text x="103.2258064516129" y="-20" dy=".35em" style="fill: black;">Round 2</text>
  </g>
</svg>

csssvg

Answer №1

Instead of using fill in this code snippet:

rect ~ text:hover {
  fill: purple;
}

… you can replace it with pointer-events: none:

rect ~ text {
  pointer-events: none;
}

This change will ensure that the focus remains within the rectangle even when hovering over the text content.

Snippet Example: 

.chart rect {
    stroke: black;
}
.x.axis path {
    display: none;
}
text {
    text-anchor: middle;
    alignment-baseline="middle";
}
rect:hover {
    fill: purple;
}
rect ~ text {
    pointer-events: none;
}
<svg class="chart" width="800" height="60">
    <g transform="translate(108.2258064516129,30)">
        <rect width="206.4516129032258" height="29" fill="orange"></rect>
        <text x="103.2258064516129" y="15" dy=".35em">ABB vs BBA</text>
        <text x="103.2258064516129" y="-20" dy=".35em" style="fill: black;">Round 2</text>
    </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

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

javascripthtmlcsssvgraphael

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

The slider spills over the edges of the page

Seeking assistance – I managed to insert this logo slider onto my page. It seems to be functioning properly, but due to the width settings of the website engine, the modules are not fully stretching across the page. In an attempt to make the slider cove ...

jqueryhtmlcssslider

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

csswebnext.jshover

The iteration count and stop code in CSS are failing to function correctly

Is there a way to make this loop once and then stay as is unless the page is refreshed? I've tried multiple methods I came across. Can you modify the code so I can see where the changes are being made? The goal is to have it display once and then per ...

htmlcssweb

Tips for positioning content next to a sidebar using basic CSS

I'm having an issue where my content is being hidden behind the sidebar and I want the sidebar to stay fixed on the left side. When I changed position:fixed to float:left in the CSS, it gave me the desired result but the sidebar isn't fixed when ...

htmlcssreactjs

applying different styles to various elements

As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

jqueryhtmlcssrandom

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

cssreactjstypescriptmaterial-uiopacity

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...

c#htmlcssasp.netimage

Struggling to change h2 style on WordPress?

In a WordPress page, I create three heading texts and adjust the CSS when the screen width is less than 820px. Here is the code snippet: <h1 class="block-h1">Heading 1</h1> <h2 class="block-h2">Heading 2</h2> <h3 class="block-h3 ...

csswordpress

two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. Th ...

htmlcss

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

javascriptcssreactjstypescriptmaterial-ui

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...

jqueryjquery-uicss

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

javascriptjqueryhtmlcss

Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image? I have a functional example of the timeline I desire, but the color coding and filtering aspects are challenging for me. I am attempting to apply a filter that will decrease the opacity of ...

javascripthtmlcsshighcharts