Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used:

.unshow-txt:hover,
.unshow-txt:focus,
.unshow-txt:active {
  display: none;
}

.show-txt {
  display: none;
  font-size: 18px;
}

.box:hover .show-txt,
.box:focus .show-txt,
.box:active .show-txt {
  display: inline;
}
<div class="box">
  <div class="unshow-txt">
    <div class="middle">
      <div class="circle-o">
        <i class="fa fa-eye fa-3x" aria-hidden="true"></i>
      </div>
    </div>
    <h2 class="h2-bigger text-center">Vorausschauend</h2>
  </div>
  <div class="show-txt">
    <p>Some text</p>
  </div>
</div>

htmlcss

Answer №1

Are you interested in this? Check out this fiddle

I implemented a CSS selector using siblings to reveal the text: 

.unshow-txt:hover ~ .show-txt,
.unshow-txt:focus ~ .show-txt,
.unshow-txt:active ~ .show-txt {
  display: inline;
}

Answer №2

To resolve the issue, I recommend using the hover effect only in the .box div to prevent conflicts between the parent and child hover animations.

.box:hover .unshow-txt,
.box:hover .unshow-txt,
.box:hover .unshow-txt {
  display: none;
}

.show-txt {
  display: none;
  font-size: 18px;
}

.box:hover .show-txt,
.box:focus .show-txt,
.box:active .show-txt {
  display: inline;
}
<div class="box">
  <div class="unshow-txt">
    <div class="middle">
      <div class="circle-o">
        <i class="fa fa-eye fa-3x" aria-hidden="true"></i>
      </div>
    </div>
    <h2 class="h2-bigger text-center">Vorausschauend</h2>
  </div>
  <div class="show-txt">
    <p>Some text</p>
  </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

The rotation function of the div element is malfunctioning

Exploring CSS has led me to a peculiar issue where transform:rotate is not functioning as expected. Here is an instance of the animation not triggering: jsFiddle CSS .close { width:100px; height:100px; background:#00f; ...

htmlcsscss-transitionscss-transforms

Incorporating PHP into Dynamic Variables

I'm curious about how PHP coding can be utilized in PHP variables. Let's say, for instance, I wish to achieve something like: $Start = " IF($lala == "0"){ echo '"; $End = " '; }"; and be able to utilize it as: echo ''.$star ...

phphtml

Assigning background colors based on the data stored in a specific field of a MySQL database

I have successfully implemented a Ticketing System using PHP and MySQL database. The view tickets page displays each ticket from the database along with its priority level, which can be Low, Normal or High. Currently, the priority value pulled from the d ...

phpmysqlcss

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

javascripthtmlangulartypescriptngrx

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

<%-include ("partials/header.ejs") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <header> <!--NAVIGATION BAR--> <img class="calender-pic" src="images/calendar.png ...

javascripthtmlnode.jsexpressejs

"Using Vue 3 to teleport content to a specific element and swap out existing

I've successfully implemented the use of Vue 3 teleport to display elements within a div. Although teleport adds items to the specified element, it doesn't replace existing elements in the div. Is there a way to configure teleport to replace th ...

javascripthtmlvue.js

Preventing the page from scrolling to the top while utilizing an Angular-bootstrap modal and a window position:fixed workaround on an iPad

It's common knowledge that there is a bug in bootstrap modals on certain devices, causing the page behind the modal to scroll instead of the modal itself (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) An easy fix for this ...

javascriptcssangularjstwitter-bootstrapangular-bootstrap

What is the process of importing a cascading style sheet into a C# object?

Currently, I am working on a web application and I would like to provide users with the flexibility to change the styling elements of CSS linked to a page through an admin screen. I have been exploring ways to load a CSS file into a C# object or convert ...

c#cssobject

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...

javascriptjquerycsshtml

The fixed width setting for the alpha table column is not being recognized

Despite my efforts, the responsive bootstrap 4 table is not adhering to my fixed column width styles. <table class="table table-responsive table-sm table-striped table-hover"> <thead> <tr> <th> <input typ ...

cssbootstrap-4

Utilizing v-data-iterator in Vuetify to display data fetched from an API in a table

After a long day of searching and experimenting, I've finally arrived here. Initially, I attempted to create a simple table with 2 columns using Row and iterate over the object to populate the left column with its keys. However, I hit a roadblock when ...

javascripthtmlvue.jsvuetify.jsdata-conversion

CSS dimensional changes

I am currently working on developing an application that involves incorporating a perspective map with the ability to add map markers represented by absolutely positioned DIVs. However, I seem to be encountering challenges related to transformations and 3D ...

csscss-transforms

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

javascriptjqueryhtmlcss

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss

excess margin running along the left side of each page

When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? https://i.sstatic.net/MsX1a.png ...

jqueryhtmlcssuser-interface

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

javascriptjqueryhtmlasp.net-mvc

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

javascripthtmlcssjquery-select2

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

Retrieving HTML source code using PyGTK WebKit

Can anyone help me with this issue I am facing in my code? When I try to get the HTML source code of the current page, all I get is 'GString at 0x8875130'. How can I convert this into actual text that contains HTML? import gi gi.require_version( ...

pythonhtmlwebkitpygtkgtk3

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

javascriptjqueryhtmlajaxurl