Is there a way to only apply styles to the specific element I am hovering over in CSS and not affect the entire list hierarchy?

I am trying to display an "Icon" when hovering over each item individually. The issue I am facing is that when I hover over a child item, the parent item also displays its icon.

.list {
  width: 150px;
  height: 19px;
}
.list >.item {
  background-color: #c3c3c3;
  display: block;
  margin-bottom: 40px;
  margin-top: 12px;
  border: 1px solid black;
  color: white;
  height: 30px;
}
.list .item .content {
  position: relative;
  width: 100px;
  float: left;
  display: block;
}
.list .item .actions {
  position: relative;
  color: red;
  visibility: hidden;
}
.list .item:hover .actions {
  visibility: visible;
  cursor: pointer;
}
<ol class="list">
  <li class="item">
    <div class="content">
      <span>1- Hi...</span>
    </div>
    <div class="actions">
      <span class="icon">Icon 1</span>
    </div>
    <ol class="list">
      <li class="item">
        <div class="content">
          <span>a- Hi 2...</span>
        </div>
        <div class="actions">
          <span class="icon">Icon 2</span>
        </div>
      </li>
    </ol>
  </li>
  <li class="item">
    <div class="content">
      <span>2- Hi 3...</span>
    </div>
    <div class="actions">
      <span class="icon">Icon 3</span>
    </div>
  </li>
</ol>

Is there a way to achieve this using CSS?

htmlcss

Answer №1

To enhance the structure, consider using an additional div to contain each individual item:

.list {
  width: 150px;
  height: 19px;
}
.list >.item {
  background-color: #c3c3c3;
  display: block;
  margin-bottom: 40px;
  margin-top: 12px;
  border: 1px solid black;
  color: white;
  height: 30px;
}
.list .item .content {
  position: relative;
  width: 100px;
  float: left;
  display: block;
}
.list .item .actions {
  position: relative;
  color: red;
  visibility: hidden;
}
.list .item-wrapper:hover>.actions {
  visibility: visible;
  cursor: pointer;
}
<ol class="list">
  <li class="item">
    <div class="item-wrapper">
      <div class="content">
        <span>1- Hi...</span>
      </div>
      <div class="actions">
        <span class="icon">Icon 1</span>
      </div> 
    </div>
    <ol class="list">
      <li class="item">
        <div class="item-wrapper">
          <div class="content">
            <span>a- Hi 2...</span>
          </div>
          <div class="actions">
            <span class="icon">Icon 2</span>
          </div> 
        </div>
      </li>
    </ol>
  </li>
  <li class="item">
    <div class="item-wrapper">
      <div class="content">
        <span>2- Hi 3...</span>
      </div>
      <div class="actions">
        <span class="icon">Icon 3</span>
      </div> 
    </div>
  </li>
</ol>

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

Aligning Bootstrap Cards in Mobile View

When viewing on mobile, the cards aren't centering properly. I've attempted to use d-flex and justify-content-center as recommended in a previous response without success. I've observed that by adding mx-auto to each card class it somewhat ...

htmlcssbootstrap-4

What methods are available in JavaScript for determining the width of a section and implementing proper spacing for a menu?

Is it possible to use Javascript to dynamically adjust the size of each <li> element within the menuArea so that they fill the entire space correctly? // Could we achieve this with the following code... var menuSpace = Math.floor((menuAreaWidth ...

javascriptjqueryhtmlcss

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

jquerycsseventsjquery-ui

A guide on utilizing jQuery to increase the value of an index

When the server returns JSON in this format: "games": [{ "gameType": "RPG", "publishers": [{ "publisher": "Square", "titles": [{ "title": "Final Fantasy", "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ...

javascriptjqueryhtmljson

The Scrollspy effect encountered an error: "$ is not defined - Uncaught ReferenceError"

https://i.sstatic.net/niNEz.jpg ...

htmlcssresponsive-designbootstrap-4scrollspy

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...

javascriptjquerycss

elements that overlap exclusively in IE 8

Here's the information I need help with: http://jsfiddle.net/ktpmm5/Z5z8n/ The page can be accessed here: In IE 8, my paging element is shifted to the left and covers the heading. This issue does not occur in Chrome, FF, and Opera. I've been t ...

phpjqueryhtmlcssinternet-explorer

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...

javascriptcssvue.jsvuetify.js

CSS Novice in need of expertise with layout arrangement

Similar Question: Nesting Divs Tutorial I'm relatively new to CSS as I've been using tables in my HTML projects for quite some time now. I am currently trying to understand how to nest or stack divs inside the content section of a 3-column l ...

cssxhtmllayoutpositioninghtml

Is it possible to implement addEventListener.delay() functionality?

Hello, I am working on a Qualtrics code that utilizes jQuery. I am looking to incorporate a delay function for event listening in my code, which currently allows key presses as inputs. Specifically, I need to disable the keys for the initial 2000ms before ...

javascriptjqueryhtmlqualtrics

Generating keyframes spontaneously, unable to remove commas

Initially, I acknowledge that this code may not be the most elegant. I have simplified it to show only the essentials. My objective is to dynamically create a @-webkit-keyframe based on input, generate a class, and then apply that class so an object can c ...

javascriptcssdynamickeyframe

Error occurs when a list index goes out of range within a for loop that contains an embedded

Here is the Python code I am working with: raw_list = reminders_context['data']['reminder_list'] This code retrieves the necessary information successfully. However, when I try to run the following code snippet, it gives me a "list i ...

pythonhtmldjango

Page loaded with activated Flash functionality

Curious if there's a way, To have my flash map on the site automatically activated upon page load, as opposed to requiring a click to interact with it. I've noticed that some websites already have their flash content active when the page loads, ...

javascripthtmlflashactionscript-3

HTML CSS list-style-position: outside not functioning as expected

I'm having trouble figuring out why the CSS property list-style-position: outside isn't working as expected. I've made sure to use the important tag and have included it in all my CSS classes, but for some reason, it's still not taking ...

htmlcss

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Load and Activate Element

I am utilizing Bootstrap 4 features and some custom settings in my elements. <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-selector make-active"> <input ...

htmlcssbootstrap-4

A stylish Bootstrap list group featuring large Font Awesome icons

I am working with a Bootstrap 5 List Group element on my webpage. To enhance its visual appeal, I want to include oversized Font Awesome icons. After some styling and using a span tag, I managed to add the icon successfully. However, the issue I am facing ...

csstwitter-bootstrapbootstrap-5

Angular controller utilizing the `focusin` and `focusout` events from jQuery

Can anyone help me figure out why this piece of code is generating syntax errors in my AngularJS controller? $(".editRecur").focusin(function() { $(.recurBox).addClass("focus"); }).focusout(function() { $(.recurBox).removeClass("focus"); }); ...

javascriptjqueryhtmlcssangularjs

Automate the process of launching the <select> picker through programming

In an Android WebView, I need a way to programmatically trigger the opening of the select element picker provided below. <select id="select1" multiple="multiple"> <option value="MDO1" selected="selected">MDO 1</option> <option val ...

javascriptandroidhtmlwebkit

Retrieving the current location synchronously via navigator.geolocation.getCurrentPosition();

I am having an issue with a function that is supposed to return the latitude and longitude as a string when called. Despite providing the correct values for latitude and longitude when alerting, it returns undefined. I would greatly appreciate any assist ...

javascripthtmlgeolocation