The issue with the CSS combination of :after and :hover:after across different HTML elements

Encountering an issue while attempting to create a rollover effect using CSS :after and :hover pseudo-elements.

Check out the clock and facebook icons on the right side by visiting:

See below for the CSS code:

.icon {
        background: url('../img/clock_icon.png') top left no-repeat;
        width: 25px;
        height: 25px;
    }

    .icon:after {
        .transition(opacity, .2s, ease);

        content: " ";
        position: absolute;
        top: 4px; left: 5px; bottom: 0; right: 0;
        background: url('../img/clock_icon.png') no-repeat;
        background-position: -25px 0;
        opacity: 0;
    }

    .icon:hover:after, .clock:hover div {
        opacity: 1;
    }

The image is faded using a sprite and opacity, but now facing trouble in hovering over both elements simultaneously. The example page shows that you can hover over the facebook icon, but not the clock. Removing the facebook icon allows successful hovering over the clock again. Note that these two icons are separate elements.

Tested this behavior on Firefox and Chrome browsers in Windows.

If anyone has insights on solving this issue, it would be greatly appreciated! :)

csshoverspritelesspseudo-element

Answer №1

Use the following CSS to update your classes (only apply changes to the mentioned classes, not the entire stylesheet):

.icon {
     background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
     height: 25px;
     width: 25px;
     position: relative
}

.icon:after {
     -moz-transition: opacity 0.2s ease 0s;
     background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
     bottom: 0pt;
     content: " ";
     left: 0;
     opacity: 0;
     position: absolute;
     right: 0pt;
     top: 0;
}

.icon:hover:after, .clock:hover div {
     opacity: 1;
}

.facebook, .facebook:after {
     background-image: url("../img/facebook_icon.png");
}

.clock {
    position: relative
}

.clock div {
     -moz-transition: opacity 0.2s ease 0s;
     color: #A0A0A0;
     font-size: 12px;
     left: 40px;
     line-height: 11px;
     opacity: 0;
     position: absolute;
     top: 5px;
     width: 160px
}

Answer №2

To make sure the content generated is positioned correctly, you need to include position: relative in your icon class rather than relying on the parent element. I have simplified your code in a sandbox, but I may not have fully captured your intent. Does it look close to what you were aiming for? I've also adjusted the positioning of the generated content.

Unfortunately, transitions cannot be applied to generated content at the moment, which explains why attempts to add opacity transitions to these elements won't work in your situation. Hopefully this limitation will be addressed soon.

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

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

Smoothly automate horizontal scrolling using JavaScript

My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...

javascriptcss

``Considering the compatibility issues with position: absolute in Internet Explorer 8

Here's an example snippet of code in HTML: <form> <input type="file" id="iefile"> </form> <form> <input type="file" id="iefile"> </form> This is how it looks with some CSS styling: form{ position:rela ...

htmlcssinternet-explorer-8

Is there a light font that cannot be replicated?

I attempted to replicate the font style used in this website's menu, but after implementing it into my WordPress CSS theme, the text still appears bold. Is there a particular technique I can use to achieve the lighter version of the font? I have loade ...

cssfontswebfontsgoogle-webfonts

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

csslinear-gradients

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

cssjsptwitter-bootstrapsass

Looking for some guidance with Bootstrap column layouts

I'm in the process of creating an address field layout. My goal is to have the State and Country sections positioned on the right side of the city and postal code fields. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3 ...

cssbootstrap-4

What causes the container's height to remain unchanged despite changes in the height of its image content?

When I set the height of an image to 50%, its container's height remains the same instead of automatically adjusting. HTML: <section class="img-show"> <div class="img-container"> <ul> <li cla ...

htmlcss

Parallax scrolling in all directions

Is there a resource available for learning how to program a website similar to the one at ? I am familiar with parallax but can't seem to find any examples that resemble what they have done on that site. ...

javascripthtmlcssparallax

What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example: Snippet: <div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"> <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; ...

htmlcss

prevent a text field from inheriting the Jquery.ui CSS styling

I am experiencing a minor issue where my text field is inheriting the CSS of the jquery.ui. This textfield is located inside a Jquery.ui tabs script, which applies its CSS by adding a class of the jquery ui tabs. How can I prevent this from happening and e ...

htmlcssjquery-ui

The vertical-align property fails to properly align the list-style-image with the text

My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...

htmlcss

Dynamic CSS sizing

Currently, I am in the process of creating a component and my goal is to achieve a specific layout without the use of JavaScript, preferably utilizing flexbox. Essentially, envision a messenger chat screen with a header and footer containing controls. htt ...

cssflexbox

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

csswebpackcss-modules

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

javascriptjqueryhtmlcss

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

Since upgrading from Django 2.1 to 3, the file field in Django admin is now displaying as "loading". https://i.sstatic.net/8JDWu.png An error is appearing in the console. https://i.sstatic.net/RCgwt.png https://i.sstatic.net/78YtG.png Previously, ther ...

javascripthtmlcssdjangoconsole

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

The redirection to the webpage is not occurring as expected

I've been attempting to redirect another webpage from the homepage in my node server. However, the redirect isn't working as intended to link to idea.html, where the relevant HTML file is located. Can anyone assist me in identifying any errors in ...

javascripthtmlcssnode.jsreactjs

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

javascripthtmlcss