What is the best way to enhance accuracy when hovering?

Have you ever noticed that the bottom menu becomes less precise when hovering over it on certain browsers? While Firefox seems to handle it perfectly, other browsers lack that smooth "snap" effect as you move through the numbers. I'm trying to find a solution for this issue but so far, my attempts have not been successful.

Check out this demo for reference

I attempted to use z-index to fix the problem, but it didn't work as expected.

<div id="projects">
    <ul>
      <li>
        <a data-project="1" href="cirqleui.html">01</a>
      </li>
      <li>
        <a data-project="2" href="./complexplayingcards/">02</a>
      </li>
      <li>
        <a data-project="3" href="./virtualmirror/">03</a>
      </li>
      <li>
        <a data-project="4" href="./transparentdonation/">04</a>
      </li>
      <li>
        <a data-project="5" href="./sounzer/">05</a>
      </li>
      <li>
        <a data-project="6" href="./smox/">06</a>
      </li>
      <li>
        <a data-project="7" href="./colro/">07</a>
      </li>
    </ul>
  </div>
#projects {
    left: 0;
    top: 100%;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 25px 0 0 25px;
    position: fixed;
    z-index: 3;
    font-size: 7vw;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -2px;
    background-color: transparent;
  }


  #projects ul {
    margin: 0;
    padding: 0;
    border: 0;
  }

  #projects li {
    list-style: none;
  }

  #projects a{
    color: black;
    transition: all .1s ease-in-out;

  }

  #projects a:hover{
    transition: all .1s ease-in-out;
    font-size: 300px;
  }

The goal is to make the hover effect smoother and snappier as you navigate through the numbers.

Answer №1

You just need to add overflow: hidden; to the li element and line-height: 1; to the a element. Here is an example: https://jsfiddle.net/eakz5d6c/

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

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

What is the best way to utilize PHP to run various functions using multiple buttons on a webpage?

In my recent project, I successfully implemented a feature where clicking a button on a webpage triggered a text change for all viewing devices. This was achieved by running PHP code on button click to instruct all devices to execute a JavaScript function ...

Creating a visually appealing layout with three equal columns side by side in Bootstrap 4

I am trying to keep my CSS efforts minimal by utilizing Bootstrap for a simple layout. However, I am encountering an issue with a horizontal scroll. If anyone has a solution or can point out what I may be missing, please share. <!DOCTYPE html> < ...

Learn the method for showing and hiding a div element in AngularJS

There is a loader on my screen that stays visible until the page finishes loading or encounters an error. Within a div, I have the loader... <div id:loader class="loading"> ...and I want to toggle its visibility based on the page loading status. ...

Tips for including a verification symbol next to your username

How can I implement a verification badge next to a user's username on a website using jQuery, JavaScript, PHP, HTML, and CSS? Currently, I am using isset($user[verification]) to display the badge, but I believe this approach is not optimal as it requi ...

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

Using the ng-show directive in AngularJS allows you to pass elements in

Web Development <li ng-show="sample($event)" TestLi</li> JavaScript Functionality $scope.sample = function($event){ //$event is undefined //perform some action } I have experimented with passing the HTML element using ng-click, but I am curio ...

Various hues blending and intertwining with one another

https://i.stack.imgur.com/zLrNK.png Could someone please clarify what is happening here? I'm attempting to change the background color to dodgerblue, but for some reason, the white background color is still showing through. Below is the code snippet ...

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

Internet Explorer 8 encounters issues with HTML5 shiv causing disruption to the webpage

As a novice in html5, I am facing an issue with rendering the page in IE8 when trying to call the html5 shiv. Only the background loads, and the rest of the content is missing. Here is what I have added: <header> <!--[if lt IE 9]><script s ...

What is the best method to locate a particular item using XPATH in case of duplicate values?

I'm facing an issue where two products are priced the same at 499 RS, but my code is consistently selecting the first product instead of the second one. How can I ensure that it selects the correct duplicate item in this scenario? ...

"Modify the MySQL database each time a user changes the value in a

As a student, I am looking to update value(s) whenever a student changes the value(s) in the correction or update form. So far, I have been able to retrieve and display values in text boxes based on the name selected from a dropdown list from the database ...

What is causing compatibility issues between html5lightbox and angular?

After integrating angular.js into my project, I encountered an issue with html5lightbox not working as expected. Instead of opening images and PDF files in a lightbox, clicking on a link takes me to another page. var app = angular.module('MyApp&apos ...

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

What is the best way to retrieve multiple model values from a single selection in AngularJS?

I recently started learning AngularJS and have a basic question to ask. I have a select box that allows users to choose a country from a list of countries. Currently, when a country is selected, only the country code is stored in the model. However, I woul ...

Creating a series of spots arranged in a semi-transparent line using JavaScript for a unique canvas

My attempt at creating a highlighter is encountering issues with transparency The problem might be due to using lineCap=round, resulting in multiple dark spots appearing in a single line (which shouldn't happen). It's difficult to fully describe ...