Issue with opacity transition in CSS3 triangle's :before pseudo-element persists

I have added a :before to the anchor in my code to create a CSS triangle. My goal is to have an opacity transition that displays the triangle when hovering over the anchor. However, I've noticed that if you quickly hover over the link, it skips the transition and shows the triangle with full opacity. On the other hand, gently hovering just around the border triggers the transition. I'm perplexed about what could be causing this issue. Additionally, I observed that on jsFiddle the transition seems to work better, although I made some slight adjustments to only focus on this part of the code. It might require experimenting from different perspectives to understand my concern.

Furthermore, the transition does not activate when moving the mouse pointer from outside the anchor.

Feel free to check out my code on JSFIDDLE.

csshovercss-transitionstransition

Answer №1

It looks like I have a solution for your problem:

http://jsfiddle.net/PhE59/3/

In essence, I made a change by moving the border declaration outside of the hover statement:

a:first-child:before {
        border-bottom: 63px solid black;
    border-left: 186px solid transparent;
}
a:last-child:before {
    border-bottom: 63px solid black;
    border-left: 150px solid transparent;
}
a:first-child:hover:before {
    opacity:1;  
}

This adjustment prevents borders from being created and removed with each hover action, instead establishing the borders just once (when the page loads) and allowing for seamless animation by only adjusting the opacity.

If you quickly hover over the element, there may still be some issues which can be resolved by reducing the animation time to less than 1 second.

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

Modifying footer flex position with translatedY child elements for a dynamic website layout

My goal is to create a sticky footer with specific requirements: The footer should have position:fixed; Its height should adjust based on: The number of child .sub-menu items added by the user (which can vary) The changes in font-siz ...

htmlcssflexboxparent-childviewport-units

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

javascriptjqueryhtmlcss

Parent div's overflow due to its flexbox properties

I am currently facing a dilemma with my nested flexbox setup. The primary objective is to create two responsive columns: .ColWrap, { width: 100%; box-sizing: border-box; background-color: #fff; padding: 50px 10px 50px 25px; display: fl ...

css

Implementing a click event listener to target a specific div using JavaScript

In my JavaScript code, I have implemented a snowfall effect. I am looking to create a click event specifically on the 10th snowflake that falls down. Additionally, I want to add a class called "clickable" to this snowflake. The goal is to redirect the user ...

javascriptjqueryhtmlcss

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Add a CSS style to an element when its parent container is hovered using Angular

I am looking for a way to change the appearance of an element when its container is hovered over using CSS or SCSS. Here are my requirements: - The solution must be implemented within the child component or the sass file, without knowledge of parent-child ...

cssangularsass

Having difficulty linking a subclass in HTML with CSS

<div class="section-3"> <div class="section-3a"> <div class="section-3a(a)"> <p>light background color (header and sidebar)</p> </div> <div class="section-3a(b)"> <p>#FFFFFF</p> ...

htmlcss

Place the written content above a div element

Having trouble placing a text/title on top of a div. I've highlighted the issue in red in the image, but can't seem to figure it out. Check out my image This is my code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlcssbootstrap-5

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

javascriptjqueryhtmlcssimage

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

Are there any available tools or scripting methods for accommodating various vendor prefixes?

My preference is to use standard CSS rules for different styles that include various vendor prefixes. To test, I would start with the following: border-radius: 5px; box-shadow: 0px 0px 4px 0px #fff; transform: rotate(90deg); For the final version, I woul ...

jquerycssutilityvendor-prefix

elevate the shadow of the menu bar above the background image

How can I ensure that the drop shadow of the menu appears in front of a background image within a div? See below for my CSS code nav { width:900px; margin: 4px auto 0px 8%; font-size: 16pt; padding-bottom: 0px; -moz-box-shadow: 7px ...

htmlcssxhtml

The image is taking up the entire div instead of just filling the area below the header

I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container. Below is the code snippet I'm work ...

htmlcss

CSS for two columns with a width of 50% each

Below is a table for reference: <table width="100%"> <tr> <td id="td1"></td> <td id="td2"></td> <td id="td3"></td> <td id="td4"></td> </tr> </table> Is there a wa ...

htmlcss

Avoid the div from covering the scrollbar within its containing parent div

Background: Trying to resolve an issue mentioned here: https://github.com/likeastore/ngDialog/issues/94 Challenge: If you open this plnkr link: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview and attempt to hold and drag the scrollbar with the mouse, ...

angularjscssangularjs-directiveng-dialog

Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up ...

javascriptjqueryhtmlcssscroll

Can anyone explain why the animation doesn't work when deleting a div?

Using vue.js 2.9 in my current project, I have set up animations for transitions and translations: transform: translate3d(0, 0, 0) &.move-enter-active, &.move-leave-active transition: all 0.2s linear &.move-enter, &.move-leave transfor ...

vue.jscss-transitions

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Is it possible to trigger a click event exclusively on a parent element?

One feature I'm trying to implement in my app is the ability to click on an item, such as changing the background color or text, and have a modal pop up with a color picker to customize the color of that specific item. However, I've run into an i ...

javascriptcssreactjschakra-ui

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

htmlcss