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

Steps to design a text div that extends beyond the bottom boundaries

Can anyone help me troubleshoot this design code using Bootstrap 3.x? Specifically, I am facing an issue with the following div. Any suggestions? Click here for more information. img{max-width:100%;} .mydiv{margin-bottom:20px;} .mytext{ positio ...

htmlcsstwitter-bootstrap-3absolute

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

javascriptjqueryhtmlcss

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

javascripthtmlcss

What is the process for using JQuery to switch the class of an element to 'nested-class'?

Styling with CSS: #logo-container { position: fixed; right:5px; .home-page { /* homepage styling */ } .content-page { /* Modify the $element's class to this class */ margin-top: 78px; } } Using JQuery to change the class of #lo ...

jquerycssclassgroupingnested

Obtaining a CHUNKY h1

After years of designing websites, one thing that continues to puzzle me is how people achieve that bold and THICK h1 effect. Take a look at this example - https://i.sstatic.net/xOJHn.png Even with a font weight of 700, it always seems too thin no matter ...

htmlcssbootstrap-4heading

What is the best way to synchronize MultiView and TreeView in ASP.NET web forms?

I'm looking to set up a tree view on the left side of my screen, along with a multiview showing content based on the selected tree item on the right. However, I'm having trouble aligning the multiview properly next to the tree view - it seems to ...

htmlasp.netcsscss-floatalignment

Issue with transition not functioning properly on a rotated CSS3 element

Having a bit of trouble with my CSS class: .rotate { -webkit-transition: all 2s ease-in-out; -webkit-transform : rotateY(360deg); } When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 s ...

jquerycss

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

What is the best way to showcase several divs, along with their respective child elements, in an inline format?

I am struggling to get 4 div sections to display side by side by using the following CSS for the parent div: .parent { display: inline; } <div class="parent"> <div class="child"> <ul> <li>t ...

htmlcss

Having trouble adjusting the outer margin of a PDF generated with html/css in a Flutter iOS app

I am currently facing an issue with the PDF generated from Html/css in my flutter iOS app. While the layout appears fine on Android, there seems to be a problem with left margins when it comes to iOS, as illustrated in the attachment provided. For referen ...

htmlioscssflutterpdf-generation

Ways to access dropdown menu without causing header to move using jQuery

Greetings everyone, I am currently working on a dropdown language selection feature for my website. The issue I am facing is that when I click on the language dropdown in the header, it causes the height of the header to shift. $('.language- ...

javascriptjqueryhtmlcss

Adjust the appearance of a glyphicon by modifying its color according to various criteria

Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color. <tr ng-repeat="ps in $ctrl.personLst"> <td>{{ ps.id}}</td& ...

cssangularjs

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

javascriptjqueryhtmlcss

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

While working on a simple postage calculator in Visual Studio with Web Forms (yes, we had to use Web Forms in Class), I included some Bootstrap for styling. However, there was an issue where my RadioButtonList suddenly stopped functioning properly. None ...

c#htmlcssasp.netradiobuttonlist

Separation between dropdown menu subcategories

I have searched through various discussions but haven't found a solution that addresses my specific issue, especially at a beginner level. I would really appreciate some guidance. The problem I'm facing involves my drop-down menu displaying gaps ...

htmlcssdrop-down-menu

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden

How to Implement Loading Image with CSS

I have customized the CSS code below to style a div element that showcases a responsive image. .my-img-container { position: relative; &:before { display: block; content: " "; background: url("https://lorempixel.com/300/160/") ...

htmlcsspseudo-classresponsive-images

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

Python - Selenium: A guide to locating elements based on color

I have a situation where I need to select only the "Claim" button from the first div, even though both div cases are very similar. Is using background color a good way to identify my element? Or do you have any other ideas? 1. <div class="well well-sm ...

cssselenium