:hover functionality can only be activated within the Inspector

The element top_fixed_right:hover on my homepage is functioning perfectly.

However, on a different page, the same div only responds to the :hover state when forced using Chrome's developer tools. Normal mouse hovering does not trigger it.

I tried opening the page in Safari as well, but had no success. It works on the homepage but not on the secondary page.

.top_fixed_right {
  position: fixed;
  right: 15;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10;
}
<div class="top_fixed_right">
  <p>About me</p>
</div>

htmlcss

Answer №1

It is important to specify the unit of measurement, such as px, after the value in pixels. This method worked perfectly for me.

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10px;
}
<div class="top_fixed_right">
  <p>About me</p>
</div>

Answer №2

When working with the CSS right property, it is important to remember that it requires a pixel value. If you set values like 10 and 15, they need to have the units specified.

Make sure to update your code from:

.top_fixed_right:hover {
  right: 10;
}

To:

.top_fixed_right:hover {
  right: 10px;
}

Here is your snippet with the necessary corrections made:

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10px;
}
<div class="top_fixed_right">
  <p>About me</p>
</div>

Answer №3

Are you looking for this?

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

  
<div class="top_fixed_right">
  <p>About me</p>
</div>

Answer №4

It's important to always use 'px' after values assigned to attributes, even though some advanced browsers may do it for you. This level of precision is crucial for a coder. Be sure to add 'px' where needed, especially within the hover event.

right: 15;  <!-- Avoid this practice-->

right: 15px; <!-- Use this correct syntax-->

If you have set the position to fixed, the :hover event may not be able to manipulate the text as intended. Consider changing the position attribute or using onmouseover and onmouseout attributes in place, since they take precedence over CSS styling.

Feel free to refer to the code snippet below for guidance:

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}
<div class="top_fixed_right" onmouseover="this.style.right='10px'" onmouseout="this.style.right='15px'">
  <p>About me</p>
</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

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

javascripthtmlcsskeyboardbackground-color

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below). https://i.sstatic.net/Kia2N.png In my attempts to achieve this, I utilized an absolutely positioned table beneath ...

htmlcss

Pressing Ctrl + S enables you to preserve the webpage for future

Is there a way to save an entire webpage, including all the HTML files, using Ctrl + S in Chrome? I have tried two different methods for saving the page, but so far, neither of them has worked: from selenium import webdriver from selenium.webdriver.common ...

pythonhtmlseleniumsave

Guide for using JavaScript to obtain the current line position within a contenteditable div during a keypress event

I am in the process of developing a customized editor using a contenteditable div. I require a javascript code that can determine the line position of the current caret position during a keypress event. It should be able to adapt when new lines are added o ...

javascriptjqueryhtmlcss

Remove the image by clicking on the "X" icon located on the top right corner of the image

One of my tasks involves deleting an image by clicking on the "X" mark located at the top right corner of the image. To achieve this, I referred to this CSS fiddle http://jsfiddle.net/yHNEv/. Sample HTML code: <div class="img-wrap"> <span ng-c ...

javascripthtmlcssangularjs

What is the process for creating distinct templates for various devices such as mobile phones, desktops, and tablets using Angular?

I am working on an Angular 9 application. Currently, I have some mockups but the template appears differently on mobile compared to desktop. However, the data fetched from API calls is mostly similar for both platforms, with slight variations possible be ...

htmlangularbootstrap-4progressive-web-appsngx-bootstrap

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...

htmlforms

Tips on deleting the lines following Texture Mapping

Why are there unwanted lines appearing on the sun sphere after applying texture mapping? I'm confused as to why these lines are showing up now. When we applied texture mapping in class, we didn't see these lines. Below is the code for the sun o ...

javascripthtmlthree.jswebgl

Dynamic website featuring fixed background with content transitioning through clicks or scrolls

Seeking a template or tutorial on how to create a website similar to the following examples: The desired website layout would allow users to scroll through content while keeping the background neutral, with the option to click links that transition to new ...

jqueryhtmlcsscss-transitionstransition

Applying personalized CSS to an element based on the condition of a child element in the previous sibling element

I am trying to apply styles to a span element only when a child element in a preceding sibling div element is active, which means a radio button has been checked. I am unable to modify the code and can only use CSS for this task. Any ideas on how to achi ...

css

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

htmlcss

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

Mobile device does not respond to HTML button click

Currently, I am developing a web application. On one of my HTML pages, I have the following code snippet: <div class="div2"> <button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button> <d ...

javascriptjqueryhtmlbrowser

Text included in the body of an email sent through Outlook

Whenever I click on a specific button, it opens Outlook with the provided details. Additionally, there is a TEXTAREA element containing certain texts. Is there a way to display this text in the body of my Outlook email? Below is the sample code - & ...

javascripthtmloutlook

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

javascriptphphtml

Creating a function within document.ready using jQuery is a common practice for ensuring that

I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...

jqueryhtml

Tips on converting fixed text to fit within a div

Facing an issue with two divs placed side by side where long text in one div overflows into the other. Check out this example for reference: http://jsfiddle.net/hjZ8F/1/ Any suggestions on how to fix this layout problem? ...

htmlcss

Chrome Driver Protractor Angular 2 encountering issue with unclickable element

My issue is with clicking the second level menu options to expand to the third level. I have tried using browser.driver.manage().window().setSize(1280, 1024) in the before all section. Here is my code snippet: it('Should trigger the expansion of the ...

javascripthtmlangularprotractor

What is the best way for me to allow specific individuals to add text or strings to a .txt file stored on my server using PHP?

Imagine user1 types "Hello" in a text box and submits it, then later user2 writes "World" and submits it. How can I write code to send their inputs to my .txt file so that the file contains "Hello World"? This seems like a complex question to answer. If ...

phphtmlservertxt

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

htmlcsstwitter-bootstrapnavbarnav