Is there a method to customize the behavior of an element with a subclass when the :hover event is triggered?

How can I apply different styling properties when hovering over a selected option with the class ".form-option-card" and ".form-option-selected"? By default, unselected options only have the class form-option-card, while the selected option includes the form-option-selected class. Is it possible to differentiate the hover effects between the two?

I attempted to define two hover event interpretations as shown below:

.form-option-card {
    padding: 16px 24px;
    display: flex;
    flex: 0 0 auto;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;
    border: 0.5px solid #d1d1d122;
    margin: 0px 0px 12px;
    max-width: 570px;
    width: 100%;
    min-height: 64px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.1s, border-color 0.5s, background-color 0.2s, box-shadow 0.1s;
}

.form-option-card:hover {
    transform: scale(1.01);
    background-color: #ffffff05;
    box-shadow: 0px 0px 15px #ffffff19;
}

.form-option-card:hover .form-option-selected {
    background-color: #6454f305;
}

However, this approach is not yielding the desired outcome. Are there any alternative solutions to achieve the intended hover effects?

cssweb

Answer №1

This is the rule in your code:

.form-option-card:hover .form-option-selected

When written this way, the rule targets an element with the class .form-option-selected that is a descendant of an element with the class .form-option-card in the hover state. It seems like this selector might not match any elements in your HTML, which is why it's not taking effect.

What you probably intended was:

.form-option-card.form-option-selected:hover

This new rule will apply to an element that has both classes - form-option-card and form-option-selected, and is in the hover state.

However, you may not need to include both classes in the rule. Consider creating a rule for form-option-selected:hover and place it after the rule for form-option-card:hover, as illustrated in the following snippet:

.form-option-card {
    /* CSS properties */
}

.form-option-card:hover {
    /* CSS properties */
}

.form-option-selected {
    /* CSS properties */
}

.form-option-selected:hover {
    /* CSS properties */
}
<div class="form-option-card">A</div>
<div class="form-option-card form-option-selected">B</div>

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

Displaying JSON data with dynamic color changes in an HTML table: A comprehensive guide

Scenario: I am currently working on a project where I need to fetch data from an external json file, parse it, and then dynamically add it to an HTML table using the footable jQuery plugin. Question: I have a query regarding how to use JavaScript to parse ...

javascriptjqueryhtmlcssjson

The CSS code for ::before is not functioning properly

Trying to enhance the style in Ionic2, I have a message box: https://i.sstatic.net/PCRtA.png I am attempting to integrate this image into it: https://i.sstatic.net/PSQID.png To create a seamless look with the message box. Facing an issue where the ima ...

cssionic2

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

Tips for aligning flex items based on the previous item in a flex container

Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...

htmlcssangularflexboxcss-selectors

What is the most appropriate unit of measurement for creating a responsive design?

I am a beginner in the world of responsive design and I'm currently figuring out how to properly layout plugins on a website when viewed on smartphones. Here's an example: @media (min-width: 568px) { .musicPlayer{ width:600px; height:320 ...

cssresponsive-designmedia-queries

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...

javascripthtmlcssfirebasegoogle-cloud-firestore

Does the padding and margin of an element alter when the position is set to relative?

By utilizing relative positioning, an element can be moved in relation to its original position in normal flow. - Citation from the book "HTML&CSS: design and build websites" by John Duckett If an element has a relative position property, it opens up ...

csscss-positionmarginpadding

Lining Up Radio Buttons Horizontally Using CSS: Alignment Issues in Mozilla and Chrome

I have recently started learning CSS and am facing an issue with the alignment of radio buttons. They do not align properly in Chrome and Firefox, although they display correctly in Explorer. Any assistance on this matter would be greatly appreciated. Th ...

javascripthtmlcss

view multiple HTML documents simultaneously in a single browser tab

Currently, I am in the process of building a wiki and have included tables in various sections. I want to showcase these tables on the main page as well. Rather than constantly copying and pasting them, I'm looking for a way to have the main page auto ...

javascripthtmlcsswiki

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

htmlcssresponsive-design

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

htmlcssresponsive-designimage-resizing

Choose a specific portion of text following an element in HTML using CSS

I would like to style the text following the span tag using CSS without affecting the span tag itself. Specifically, I want to apply styling only to the text that reads "Text to be selected", leaving the span tag unaffected. The style I desire i ...

csscss-selectors

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

Modify the hue of the iron-icon upon being tapped

There's a simple example I have where my goal is to modify the color of an iron-icon when it's tapped. To achieve this, I'm utilizing iron-selector for tapping: <template> <style> :host { display: block; padding: 10 ...

javascriptcsspolymer

Using HTML5 and CSS for 3D transformations along with stacking divs to create a unique accordion

Is there a way to stack divs vertically above each other and use CSS3 3D transforms to create a folding effect between them? I've tried rotating the divs on their X axis, but it leaves gaps between each div because they don't collapse into each o ...

htmlcsstransform

Dynamic layout problem with navigation pills

I currently have 2 navigation pill buttons designed to alter the layout upon being clicked. Both layouts always include the sidebar which remains constant throughout. Clicking on Nav pill 1 will display the layout as follows: sidebar | column 1 | column ...

htmlcsstwitter-bootstrapbootstrap-5

Challenges with Image Placement and Alignment

Having trouble with the sizing of my image in the skill portion of my website. The clouds and mountains look fine, but for some reason, the image isn't the same size. Additionally, the text "full stack developer" is not centered under my name anymore ...

htmlcss

Varying Heights of Columns in Bootstrap

I need assistance in creating a layout with two columns. The first column should have three smaller boxes of equal height, while the second column should have one larger box. However, when I try to increase the height of the box in the second column, the l ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

What causes the excess spacing in flexbox containers?

Is there a way to remove the padding around the container and between the two columns? I attempted setting margin and padding to 0, but it was not successful. https://i.sstatic.net/i5XJJ.jpg body, html { width: 100%; height: 100%; } main { disp ...

htmlcssflexbox

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

javascriptjqueryhtmlcssanimation