What is the best way to define multiple elements for hover effects in CSS?

Within my code, I have an SVG image containing 3 paths with the IDs #top, #left, and #right. My goal is to swap their colors when a hover event occurs over the image container (#block).

<svg>

    #top           /* color 1*/
#left  #right      /* color 2*/

</svg>

Currently, I am using 3 CSS styles to achieve this effect:

#block:hover #top
{ fill: color2; }

#block:hover #left
{ fill: color1; }

#block:hover #right
{ fill: color1; }

I am wondering if it's possible to combine the last two styles into one like this:

#block:hover #left, #right
{ fill: color1; }

Or perhaps, is there a more efficient way to combine all styles into one?

#block:hover
{ 
  @ #left { fill: color1; }
  @ #right{ fill: color1; }
  ....
}

Thank you for your help!

Answer №1

If you are looking to streamline your CSS coding, consider using either or http://sass-lang.com/. Here's how it can be done in pure CSS:

#block:hover #left, #block:hover #right
    { fill: color1; }

Alternatively, with less:

#block:hover {
    #left, #right {
        fill: color1;
    }
}

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

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...

Ways to arrange buttons vertically so they are perfectly aligned beneath one another

I'm trying to align a set of buttons, each containing an information icon, vertically under each other. The current alignment can be seen in image_1 below. Can someone please provide me with guidance on how to achieve this using CSS and HTML? I was t ...

5 Tips for Importing Internal CSS Conditionally Using JavaScript in Vue.js

At the moment, I am facing a challenge where I need to import a CSS file conditionally based on the user's browser. To keep the CSS file from being global, I have implemented the following code: created() { this.checkIsMobile() }, methods ...

Place the standard elements within an SVG container

Is it possible to include standard elements within an svg element? For instance, can I place input, label, etc. elements inside the SVG if it's going to serve as a triangular outer container? Alternatively, should I consider using clip path to genera ...

The Jquery function for selecting a div added by an Ajax call is not functioning properly, but it works fine without the need for an

I have a unique checkbox that I created using an Ajax call. The issue I'm facing is that the jQuery to select the checked input in the second div #test_checkbox_ajax isn't working, while it works perfectly fine in the first div #test_checkbox. Cr ...

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

Do CSS Stylesheets load asynchronously?

Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...

What is the best way to position two divs side by side at the bottom of the

When trying to align my second div with the first one, I face an issue. If the text above the first blue box is longer, the second div appears to be outside the line of the box. Changing the relative position doesn't solve this problem either. When th ...

Create movement for an object when it is clicked and when the mouse cursor enters or leaves the object, as well as other

I am struggling with the layout of my webpage, which consists of 3 main div elements. https://jsfiddle.net/wpztofb7/ <body> <div id="topBox" class="otherBox"> TEST TOP </div> <div id="middleBox" class="middleBox"> ...

Enhance your React/Bootstrap project with a hover effect class similar to Tailwind CSS's :hover feature

Is there a way to achieve the hover effect in React using Bootstrap similar to Tailwind's approach? I've searched online but haven't found any solutions. Appreciate any help! ...

Creating a custom button to perfectly fit the contours of its content with Font Awesome 5

Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button. Button: <button type='but ...

Adjusting the characteristics of a class when hovering

Is it possible to change the CSS property of a class when hovering over another class in CSS? #_nav li { display:inline; text-decoration:none; padding-top:5vh; line-height:8vh; margin-right:5vh; cursor:pointer; } #_nav li:hover + ...

Issue with Resizing: Custom Icons Drifting from Right Side of Header

My header is a bit messy. I wanted it to be based on the full-width image without changing its height. To achieve this, I floated the header image to the left and created a div that filled in the color of the image across the entire page. After that, I add ...

Choosing the :after pseudo element that comes after the p element within the container's previous element

Currently, I have a specific HTML code that is not editable: <div> <input type="text" id="name" /> </div> To add a label after the input using CSS (since "after" doesn't work on input fields), I do the following: div:after { ...

Is there a way to prevent my table from surpassing the width of my card using CSS?

My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should a ...

Issue in the -ms-grid-row-align attribute could be causing unexpected behavior

Here is a code snippet I have where the image exceeds 44px in height: <div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px"> <div style="-ms-grid-row:1; -ms-grid-column:1;"> <img style="max-width:100%;max-height:100% ...

What's the best way to perfectly align table text in the center both horizontally and vertically?

Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

My goal is to retrieve an element from a list by clicking on a link containing specific text. Here is the HTML code snippet: <table> <td> <tr><a href='...'>I need help</a></tr> <tr><a href=&a ...

Selenium with Python: A class focused on link text

Currently, I am encountering a challenge while using Python and Selenium to scrape content from a specific webpage. The issue lies in the presence of multiple div-classes with identical names but distinct content. My requirement is to extract information f ...

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...