Challenge in altering text color upon hovering over it

I'm attempting to change the text color to white upon hovering, but I haven't had any success so far.

Here's the code snippet that I've used. How can I ensure that the text color changes to white and also its size increases when hovered over?

This is the code snippet I experimented with: 

h1::before,
h1::after {
  content: "";
  width: 0%;
  position: absolute;
  height: 2px;
  background: white;
  transition: width .3s ease;
}

h1:hover::before,
h1:hover::after {
  width: 100%;
}

h1::before {
  top: 0;
  left: 0;
}

h1::after {
  top: 100%;
  right: 0;
 
}
<body>
<div class="text-wrapper">


  <h1 id='text'>
    Days are gone </h1>


</div> 
</body>

htmlcss

Answer №1

If you want to achieve this effect, you can utilize the :hover feature like so: #text:hover{color:red}

body {
  Background: #7a86cb;
  text-align: center;
}

h1 {
  text-align: center;
  color: #6849e3;
  font-family: Merriweather;
  display: inline-block;
  position: relative;
}

h1:hover {
   color: #6849e3;
   
 }

h1::before,
h1::after {
  content: "";
  width: 0%;
  position: absolute;
  height: 2px;
  background: blue;
  transition: width .3s ease;
}

h1:hover::before,
h1:hover::after {
  width: 100%;
}

h1::before {
  top: 0;
  left: 0;
}

h1::after {
  top: 100%;
  right: 0;
 
}
#text:hover{
color:red
}
<body>
<div class="text-wrapper">


  <h1 id='text'>
    INTERNET </h1>


</div> 
</body>

Answer №2

Great job on everything you've done so far, but there's just one small change that needs to be made.

Instead of using

h1:hover {
   color: #6849e3;
 }

please use

h1:hover {
   color: white;
 }

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 it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts

Displaying a dynamically populated variable using PHP within an isolated code block

One of the challenges I am facing involves a PHP loop responsible for loading images onto a slider: <div id="slider" class="flexslider"> <ul class="slides"> foreach($imglist as $image) { $caption = // Extracting metadata from each image ec ...

phpcss

When the nav menu toggler in Bootstrap 4 is clicked on a mobile screen, it causes the content to

When I view this on xs or sm screens and click on the navbar toggler, it pushes all the content, including the header where the toggler is located, down the page to accommodate the dropdown menus. This behavior seems to be different from Bootstrap 3 and Bo ...

csstwitter-bootstrapbootstrap-4nav

Using requestAnimationFrame to animate several independent objects

I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...

javascriptjqueryhtmlcssrequestanimationframe

An irritating bug causing a 1px difference in Chrome 21

Hey there, I've encountered a strange issue with the datepicker on this website. It works perfectly fine on IE8+, Firefox 14, Chrome 20, and Opera 12. However, as soon as Chrome updated to version 21, things went haywire! I'm baffled and can&apos ...

cssgoogle-chrome

Properly Adding an External jQuery File in HTML Using jQuery

Seeking assistance as a newcomer to JS and programming in general. Currently working on a website where each page has its own HTML / PHP file, with jQuery and global JS functions included in the footer via a separate includes file "footer.php". Everything ...

javascriptjqueryhtmlincludedocument-ready

Closing a popover in JavaScript when another one is opened using the popper.js library

I am currently working with basic HTML and have loaded popper.js onto my webpage. I am facing an issue with 3 popovers that do not close when I click to open another one. My approach involves using tailwind as CSS and vanilla JS, without relying on jQuery ...

javascripthtmlpopper.js

What is the solution for resolving scrolling issues when flexbox content is aligned vertically in the center?

One of my goals is to ensure that when the viewport is taller than the content, the content is vertically centered. However, if the viewport is not tall enough and the content overflows, I want the parent element to provide a vertical scrollbar. How can I ...

cssscrollvertical-alignment

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

Creating dynamic properties in a JavaScript object literal is a great way to customize

I am encountering an issue where I am trying to define input values from an HTML page as properties of a JavaScript Literal object, but I keep getting an error stating Undefined when I try to access it in the JS file. For example, if I have an input value ...

javascriptjqueryhtml

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

javascripthtmlcss

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Tips for Automatically Keeping Bootstrap Dropdown Open When Selecting an Option

My bootstrap dropdown features a select box with specific options that I want to keep visible. However, when I click on it, the drop-down closes unexpectedly. How can I prevent the drop-down from closing when clicking on the select box? Check out this boo ...

csstwitter-bootstrapbootstrap-4

Create a stunning Bootstrap carousel that showcases images perfectly centered and automatically resized in both width and height to fit the Div container

Currently, I am working on integrating a Bootstrap carousel that features centred and auto-resized images. In the JSFiddle example provided (https://jsfiddle.net/koba1/mb94dgzu/6/), you will notice that the first image (a vertical one) stretches to fill th ...

htmlcssbootstrap-4

Obtain all the data in the table cells using Jquery

I've been tasked with a unique challenge. There's a table with a form inside it, and I'm using Jquery to handle the form. Is there a way to retrieve the data from the <td></td> element without any specific id or class? The situa ...

jqueryhtmlforms

Experiencing problems with the calling convention in JavaScript

Here is a snapshot of the code provided: If the function testFields at Line:3 returns false, then the program correctly moves to Line:21 and returns the value as false. However, if testFields returns true, the program proceeds to Line:4, but instead of ex ...

javascriptjqueryhtml

Divide Footer Information into Two Sections: Left and Right

<footer> <div class="copyrights-left"> <p>&copy 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...

htmlcss

Problem with Bootstrap-slider not loading correctly

I seem to be facing an issue with selecting DOM elements that are part of bootstrap-slider. When I try to target them with events like click, nothing happens. All events work fine when the page is refreshed. What could be causing this problem? $(document ...

javascriptjquerycssbootstrap-slider

Updating the bootstrap grid for printing on smaller screens by changing from col-xs to col-sm

Is there a simple way to make my webpage follow the col-sm-* grid instead of the col-xs-* grid when printed? Can the width of the print preview page be adjusted to accommodate styles for col-sm-* rules? Here's an example: window.print(); <li ...

csstwitter-bootstraplessmedia-queries

Method to categorize content within a contentEditable div

I am currently working on creating a user input feature (contentEditable div) for a chat, allowing users to write messages and tag someone using the format hello @user32. I want the tagged username to be converted into a clickable link that is properly for ...

javascripthtmlajax