Avoid changing the styling of the parent element when hovering over it

I am working on a comment box that allows for nested comments and is structured in the following way:

<article class="comment">
  Level 1 comment
  <article class="comment">
    Level 2 comment
  </article>
  <article class="comment">
    Level 2 comment
    <article class="comment">
      Level 3 comment
    </article>
  </article>
</article>

To highlight the background of the currently hovered element, I am using .comment:hover; however, this results in all parent elements being highlighted as well. I want to avoid this.

Despite this, I still want to maintain the nested structure so that each comment's highlight includes the children of the hovered comment as well.

htmlcss

Answer №1

Take a look at 

<article class="comment">
    <span>Level 1 comment</span>
  <article class="comment>
      <span>Level 2 comment</span>
  </article>
  <article class="comment">
    <span>Level 2 comment</span>
    <article class="comment">
      <span>Level 3 comment</span>
    </article>
  </article>
</article>​

css

article > span:hover
{
    background-color: red;
}​

To make them individual, just wrap them in something.

http://jsfiddle.net/bYmjf/1 <-- See example in action

Answer №2

If you're looking to try out a different approach that works across various browsers instead of relying solely on pointer-events, take a look at the discussion provided here. However, I recommend also considering restructuring the classes assigned to your elements for improved maintenance in the long run.

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

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

javascripthtmlcssangularjstwitter-bootstrap

Is it possible to reset a form without using JavaScript? (The input type=reset function is not functioning correctly

So, basically I need a quick way to clear all the fields in my form. I've experimented with a couple of options: <input type="reset" value="Clear all fields"> And <button type="reset">Clear all fields</button> Unfortunately, none ...

htmlformsbuttonreset

Using the feColorMatrix SVG filter in CSS versus applying it in JavaScript yields varied outcomes

If we want to apply an SVG filter on a canvas element, there are different ways to achieve this. According to this resource, we can apply a SVG filter to the CanvasRenderingContext2D in javascript using the following code snippet: ctx.filter = "url(#b ...

javascripthtmlcsshtml5-canvassvg-filters

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

table: column with percentage-based width AND a minimum width in pixels

Here is an example I'm working with: https://stackblitz.com/edit/js-ivvupc?file=index.html I need my table to be responsive, meaning it should become scrollable when the window size is reduced. The basic setup for this is already in place within the ...

htmlcsshtml-tableresponsive

No data returned in AJAX response while trying to connect to a RESTful service

After creating a WCF REST service that returns a JSON response like {"Id":10,"Name":"Peter"}, I noticed that when trying to access it using the provided HTML5 code snippet, the status returned is always 0. Can anyone help me figure out what might be caus ...

ajaxhtmlrest

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

javascriptjqueryhtmlgoogle-analytics

Activating a inaccessible element

Attempting to enable a disabled element upon clicking a P element, the following code snippet demonstrates storing a value from one textbox into another. The appended div contains a subsequent textbox which will be disabled. On mouseover of the div, option ...

javascripthtml

Unable to display a recursive component with Vue3 CDN

I am currently working on a project using Vue3 CDN because the project environment cannot run npm. I have been trying to create a component with html+CDN, but when attempting to create a recursive component, it only renders the top-level element. Is there ...

javascripthtmlvue.jsvuejs3

Deactivate the connection button for accessing the database

I'm currently developing a PHP script to establish a connection with a MySQL database. My goal is to deactivate a button and display a spinner image when I click on a submit button to initiate the database connection. Below is the code snippet I have ...

phpcssbootstrap-4

Stop unnecessary re-rendering of controlled React inputs

Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...

htmlreactjs

What is the best way to show an on/off button in an HTML page when it loads, based on a value stored in a MySQL database?

Is there a way to display a toggle button onload based on a value from a MySQL database table? I need the button to switch between 0 and 1 when clicked. I've looked at several solutions but none of them seem to work for me. Any help would be greatly a ...

javascriptphphtmlmysqlajax

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

I am using AngularJS to create a dropdown menu with select and option tags. The menu is referencing a model and looks like this: <select id="edit-location" class="" ng-model="packageLoc"> <option ng-repeat="x in loc" value="{{ x.locationId }} ...

javascripthtmlangularjsangularjs-ng-repeatangular-ng-if

Hide a header and bring it back after a 2-second delay

I REPLIED BELOW Is there a way to make the header of my webpage fade out when scrolled and then be hidden using style.display? Here's what I have so far: <script type="text/javascript> function Scroll() { var head = document.getEl ...

javascripthtmlcss

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

javascriptcssreactjsnpm

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver