Maintain visibility of adjacent elements while one is being hovered over

Take a look at this demonstration: https://jsfiddle.net/ptss94gw/

I'm curious if it can be achieved using only CSS to maintain visibility of the .more-icons division when hovering outside of the .h-icon.

htmlcsscss-selectors

Answer №1

Do you mean this?

I have adjusted the hover state to apply to .icon-line instead of the anchor elements.

.icon-line {
    float: left;
    a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;   
    }
    &:hover .h-icon {
        i {
            opacity: 1;
        }
        & ~ .more-icons {
            opacity: inherit;
        }
    }
}
.h-icon {
     i {
         display: block;
     }
    &.test {
        float: right;
        display: inline-block;
        width: 16px;
        height: 16px;
        background:blue;
        i {
             opacity: 0;
        }
        .main-ico {
            width:16px;
            height:16px;
            background:red;
        }
    }
}
.more-icons {
    float: left;
    height: 16px;
    padding-right: 8px;
    opacity: 0;
    z-index: -10;
    a {
        display: block;
        float: left;
        height: 14px;
        width: 14px;
        text-align: center;
        margin: 2px 8px;
        z-index: -1;
    }
    i {
        display: block;
    }
    .icon-1 {
      width:16px;
      height: 16px;
      background:red;
    }
    .icon-2 {
      width:16px;
      height: 16px;
      background:blue;
    }
    .icon-3 {
      width:16px;
      height: 16px;
      background:green;
    }
}


.icon-line {
  float: left; }
  .icon-line a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; }
    .icon-line:hover .h-icon i {
      opacity: 1; }
      .icon-line:hover .h-icon ~ .more-icons {
        opacity: inherit; }

.h-icon i {
  display: block; }
  .h-icon.test {
    float: right;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: blue; }
    .h-icon.test i {
      opacity: 0; }
      .h-icon.test .main-ico {
        width: 16px;
        height: 16px;
        background: red; }

.more-icons {
  float: left;
  height: 16px;
  padding-right: 8px;
  opacity: 0;
  z-index: -10; }
  .more-icons a {
    display: block;
    float: left;
    height: 14px;
    width: 14px;
    text-align: center;
    margin: 2px 8px;
    z-index: -1; }
    .more-icons i {
      display: block; }
      .more-icons .icon-1 {
        width: 16px;
        height: 16px;
        background: red; }
        .more-icons .icon-2 {
          width: 16px;
          height: 16px;
          background: blue; }
          .more-icons .icon-3 {
            width: 16px;
            height: 16px;
            background: green; }
<div class="icon-line">
<div class="h-icon test">
<a href="#">
<i class="main-ico"></i>
</a>
</div><!-- .s-icon -->
<div class="more-icons">
<a href="#">
<i class="icon-1"></i>
</a>
<a href="#">
<i class="icon-2"></i>
</a>
<a href="#">
<i class="icon-3"></i>
</a>
</div>

</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

Navigation logo with correct linking URL

Struggling with creating a header and having trouble with proper link href placement. The logo-box I'm working on contains the company's logo image and name, but when using display flex to align them, it covers the full width of the box. I'm ...

htmlcssweb

How to display a three.js scene in the center of a container

I'm having trouble getting my three.js scene to display above some cards and right below my navigation bar. Currently, the scene is rendering under the cards and is not centered. Despite looking at other forum posts for help, I can't seem to figu ...

javascripthtmlcssthree.jsrendering

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

Ensure that the text is contained within a div element with a border-radius of 100%

Is there a way to set text inside a div with a border-radius of 100% in a circular shape? I have paragraphs and ul li's within the div, but the text goes outside the borders. How can I wrap the text within the curved edges of the div? ...

htmlcss

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

csshtml

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

javascriptjqueryhtmlajaxjson

Issue with Audio TAG functionality in Internet Explorer 9

I am facing an issue with my jQuery code that generates an audio tag. The code works perfectly in Firefox and Chrome, but it is not functioning properly in IE9. Here is the code snippet: $(document).ready(function () { var source = "/TTS.aspx?tts=" + ...

jqueryhtml

Tips for positioning a div element at the bottom of a webpage

I am currently working on placing this banner ad at the bottom of the page. I want the image to be positioned within the banner div without overlapping the div above it. .banner { width: 100%; } .banner img { width: 100%; max-he ...

htmlcss

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

What is the best way to place a list within a <div> element?

There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it. Check out this image for reference In the image above, you can see the background and the list, but I'm ...

htmlcss

Loading Bootstrap Modal with click event triggering

I am currently working on a project where I need to load ajax content into a bootstrap modal when a link is clicked. I have been able to successfully load the content without any issues, but I am facing some difficulties triggering the modal window to open ...

javascriptjqueryhtmlwordpresstwitter-bootstrap

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I properly assign the final value after applying a discount to prevent undefined index errors?

Developed a new coupon code system for the admin to generate coupons. In the process, there is a need to calculate the final amount to be paid after applying the discount. An if statement was utilized as shown below: if(!empty($discountCode)) { $amou ...

javascriptphphtmljson

Using Selenium in Python to choose an option from a nested multiselect optgroup

I'm facing a challenge with selecting an option in my nested multiselect using Selenium in Python. Here's the code snippet I've tried... filter_brands = Select( filter_panel.find_element_by_css_selector("select.form-control#filter-brands[na ...

pythonseleniumxpathcss-selectorsoptgroup

Is it possible to include jQuery's selectors contain and closest within my CSS selector?

I created a script to hide specific table rows as follows: $('.ms-formtable nobr:contains("Question")').closest('tr').hide(); However, I'm unsure if there is a way to achieve the same result using only CSS. Can anyone provide adv ...

jqueryhtmlcssjquery-selectorscss-selectors

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e ...

javascriptjqueryhtmlcssangularjs

How come jQuery won't let me activate the 'change' event on a radio button?

Click the link below to access the page: Below are the original javascript codes that are functioning correctly: $(document).ready(function(){ $(".open_gene").on('change', function(event) { $('#Gene_field').show(); }); ...

javascriptjqueryhtml

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

htmlcss

Permanent Solution for HTML Textbox Value Modification

https://i.sstatic.net/nB58K.pngI'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude ...

javascripthtml