Activating Hover Effect and JavaScript Click Function on a CSS Pseudo-Element

I'm having an issue with a CSS after element that is supposed to function as a button to take the user back to the top of the page. However, I can't seem to get the hover state and jQuery click function to work properly. I'm wondering if there might be a syntax error that I'm overlooking?

Here's my HTML:

<div id="divMain">
    ::after
</div>

And here's the CSS code:

#divMain:after { content: 'Back  To Top'; position: relative; left: 93%; font-size: 16px; bottom: 30px; cursor: pointer; padding: 5px 10px; }
#divMain:after:hover { color: #b0f14f; }

For the JavaScript/jQuery part, I have this code:

$('#divMain:after').click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'fast');
    });

Answer №1

The jQuery selector :after is inaccessible because it is not considered a part of the DOM.

If you are already utilizing jQuery, consider adding another class to achieve similar effects. Alternatively, for positioning elements absolutely, creating a new element and styling it accordingly may be a better approach than relying on :after pseudo-selector.

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

Updating the active class in a list-group anchor tag with ASP.NET

I've created a MasterPage for an ASP.NET webforms application where I have designed the layout. Here's how it looks: <div class="container"> <div class="row"> <div class="col-md-3"> ...

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

Linking CSS to any page other than index.html will not be feasible

Hey everyone! I've run into a little problem that's driving me crazy, so I figured I'd reach out for some assistance. Here's the situation: In my file structure, I have a root file that includes index.html, /css/, /pages/, and /images/ ...

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

Dealing with multiple parameters using React Router

I work with two main components: the AddList component and the DetailList component. The functionality I have set up involves a list of AddList components, each containing a button in every li element. When a user clicks on any button, the corresponding ID ...

Employ the setInterval function to run a task every 15 minutes for a total of

I have a task that requires me to use setInterval function 5 times every 15 minutes, totaling one hour of work. Each value retrieved needs to be displayed in an HTML table. Below is the table: enter image description here For example, if it is 7:58 p.m. ...

Transfer JSON data from Python Requests to JavaScript within Django views.py

I have a Python script that retrieves JSON data and parses it: from django.http import HttpResponse import json, requests def fetch_data(request): context = {} platformUrl = 'https://www.igdb.com/api/v1/platforms' platformReq = requ ...

Changes to CSS rules were implemented using Javascript, causing visible effects in Chrome but not in Firefox or Internet Explorer

My website features a unique toggle function to show and hide divs, activated by clicking a button. While this functionality is flawless in Chrome, other browsers are not cooperating. The issue lies with my JavaScript code that adds an event listener for ...

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

Using vanilla JavaScript with AJAX, the second asynchronous post will only be sent once the first post has been successfully sent

I am in the process of creating a HotSpot that offers internet access once users input their email addresses. To make this function properly, I need to execute two separate AJAX posts: The first one sends hidden username and password details to the rout ...

I am currently working with CakePHP and am interested in learning how to expire the admin session

I'm having issues with the code in my UserController. When I open the admin panel in two tabs within the same browser and log out from one tab, I am unable to redirect to the login page from the other tab when clicking on any menu. function beforeFil ...

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

What is the process to manually trigger hot reload in Flutter?

I am currently developing a Node.js application to make changes to Flutter code by inserting lines of code into it. My goal is to view these updates in real-time. Is there a way to implement hot reload so that every time I finish writing a line in the file ...

Using JavaScript to make an HTTP request for a JSON object from an API hosted on a local server

I currently have an API running on my local machine using Sinatra and JRuby to interact with a SQL server. When I access 'localhost:4567/get/233310/loc', it returns a JSON object. [{"uid":233307,"lat":41.4191113333333,"long":-72.8941905}] My go ...

Guide on making a personalized object in JavaScript

I am struggling with a piece of JavaScript code that looks like this: var myData=[]; $.getJSON( path_url , function(data){ var len = data.rows.length; for (var i = 0; i < len; i++){ var code = data.rows[i].codeid; var ...

Effortlessly upload multiple dynamic files using Nest JS

Attempting to upload files with dynamic keys, however nest.js requires key names. Attempted solution: @UseInterceptors(FilesInterceptor('files')) async uploadFile(@Query() minioDto: MinioDto, @UploadedFiles() files: Array<BufferedFi ...

Varying dimensions of navigation bars across different webpages

I'm currently working on a website and if you visit , you'll notice that the navigation bar changes size on different pages. I'm not sure why this is happening and would greatly appreciate any assistance in resolving this issue. ...

spinning camera around a globe with javascript and three.js

In my project, I am working on enabling a player to navigate in a first-person view on a planet using three.js and JavaScript. There are two key aspects I am focusing on: a) Implementing player movement around the planet, which involves two types of movem ...

Creating and modifying a JSON file using Discord.js

I recently developed a Discord bot using node.js that includes a setup command. This command automatically creates a channel where certain activities take place upon activation. My goal is to have the setup command capture the ID of the newly created cha ...

By pressing enter, Combobox autocomplete feature automatically selects the first item in the suggestion list

I have successfully implemented a jQuery combobox autocomplete feature, similar to the one on the demo below. jQuery combobox autocomplete Is there a way to configure the jQuery combobox autocomplete to automatically select the top suggestion when the ...