Hover to make Jquery float on the right side

Here is the code I am working with:

  <div class="footer-menu">
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>World
     </span>
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Internet
     </span>
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Travel
     </span>
     <span>
        <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Technology
     </span>
     <span>
     <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Fashion
     </span>
 </div>

My goal is to add the float-right class to the i tag when hovering over the span using jQuery. However, the issue I am facing is that when I hover over one span, the class gets added to every i tag.

 $( ".footer-menu span" ).hover(function() {
  $('i').addClass("float-right");
});
javascriptjqueryhtmlcss

Answer №1

Give this a shot

$( ".footer-menu span" ).hover(function() {
  $(this).children("i").addClass("float-right");
});

If you need to remove the class on hover out

$( ".footer-menu span" ).hover(function() {
      $(this).children("i").toggleClass("float-right");
    });

Answer №2

Who needs Javascript for hover effects when CSS can do the job effortlessly:

.header-navigation a {
  color: blue;
}
.header-navigation a:hover {
  color: red;
}

Answer №3

You can attempt it in the following way.

$( ".footer-menu span" ).hover(function() {
  $(this).find("i").addClass("float-right");
});

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

Establish the starting status for material-ui dialog

In my MaterialUI dialog, there are various elements like text fields and drop downs that require specific values set each time the dialog is opened. Some elements also need to be loaded based on certain conditions being met, such as loading user data. I a ...

javascriptreactjsmaterial-ui

Troubleshooting disabled CSS not functioning properly in Bootstrap date picker

I've implemented the bootstrap datepicker in my project. I have successfully restricted users from selecting dates prior to the current date by setting the minimum date option. However, there's an issue where users cannot easily distinguish betwe ...

cssbootstrap-datepicker

Only implement the CSS styles if there are multiple elements that have the same class

I have 2 cards with the class card displayed within a card-stack. There can be any number of such cards. <div class="card-stack"> <div class="clear"><button name="clear" value="Clear all" onclick=&qu ...

htmlcss

Ways to restrict the number of times elements are iterated in a `v-for`

Currently developing a compact application using Vuejs 2.0. There are around 15 elements that need to be iterated, but I would like to restrict v-for to only display 5 at a time, with additional buttons for viewing the entire list. Is it feasible to achi ...

javascriptvue.jsvuejs2

What is another option for object-fit: cover?

Is there a way to resize an image on my webpage while maintaining its aspect ratio based on the screen size? I want the smaller dimension (width or height) to fit exactly within the element, with the larger dimension overflowing. I came across the objec ...

htmlimagecss

Troubleshooting issue: AngularJS not receiving NodeJS GET requests

I recently developed a web application for sharing photos. Currently, I am working on a route that is designed to fetch and display the photos of all users from an array. The code for the route is as follows: router.get('/getphotos',function(re ...

javascriptangularjsnode.jsexpress

Trouble linking Node.js with SQL Server database

const express = require('express') const bodyParser = require("body-parser") const sql = require("mssql") const app = express() const port = process.env.PORT || 3000 app.use(bodyParser.json()); var cors = require('cors') app.use(cors() ...

javascriptnode.jssql-server

billboard.js: The 'axis.x.type' property is conflicting with different data types in this context

axis: { x: { type: "category" } }, An issue has arisen: The different types of 'axis.x.type' are not compatible with each other. The value of 'string' cannot be assigned to '"category" | &qu ...

javascripttypescriptbillboard.jses6-modules

Checkbox selection does not trigger updates in the model

I have a question regarding my issue, specifically related to the following code snippet. Can someone please explain the difference between these two lines of code? @model MyProject.SampleModel.CustomModels @using MyProject.SampleModel; My model: Namesp ...

jqueryasp.net-mvcasp.net-mvc-4razor

Having trouble adjusting the font color and font style of the text in a hamburger menu

I'm currently working on customizing the text displayed on my hamburger menu. Below are the codes I've tried to adjust the text and font-family of the hamburger menu, but it seems like these changes only affect the color of the icon, not the actu ...

htmlcssmaterialize

There are zero assumptions to be made in Spec - Jasmine analyzing the callback function

I've encountered a challenge with a method that is triggered by a d3 timer. Each time the method runs, it emits an object containing several values. One of these values is meant to increase gradually over time. My goal is to create a test to verify wh ...

javascriptangulartypescriptjasminejasmine2.0

Reproducing a table row

Here is the table structure I am working with: <table id="customFields" class="table table-bordered table-hover additionalMargin alignment"> <thead> <tr> <th colspan="2"></th> <th>Some Title</ ...

javascriptjquery

Using CSS height 100% does not function properly when the content overflows

Here's what's going on with this code snippet: HTML <div class="one"> <div class="will-overflow"> </div> </div> CSS html, body { width: 100%; height: 100%; } .one { height: 100%; background: r ...

javascripthtmlcss

Tips for sending an object to a specialized child component in ReactJS with Typescript

Purpose I am trying to retrieve data in the root component of my app using useEffect() (and then set it to state) and then pass that state to a custom component. I have successfully accomplished this with JavaScript but seem to be encountering issues when ...

javascriptreactjstypescriptreact-component

Retrieve information from a controller and pass it to a Component in AngularJs

Having an issue with passing data from a controller to a component in AngularJs. The data is successfully passed to the template component, but it shows up as undefined in the controller! See below for my code snippets. The controller angular.module(&a ...

javascriptangularjscomponentsangularjs-components

Utilizing Next.js to dynamically render a modal using data from the router's query parameters

I have an interactive feed that showcases cards. These cards trigger a modal to open, providing more details related to each card. The information is passed down two levels using props and everything functions smoothly until I incorporate Next Link for mod ...

javascriptreactjsnext.js

Are there any possible resolutions to the issues plaguing Next.Js?

After switching from React to Next.JS, I've encountered some challenges that I'm hoping to find solutions for: In contrast to React, Next.JS doesn't allow me to change a specific part of a webpage and maintain a static element like a navb ...

javascriptcssreactjsnext.jsjsx

Disappearing Data in Chart.js When Window is Resized

I am utilizing the Chart.js library to present a line chart in a div that is enclosed within a <tr>. <tr class="item">...</tr> <tr class="item-details"> ... <div class="col-sm-6 col-xs-12 chart-pane"> <div clas ...

javascripthtmlcss

What steps should I take to fix an error in my code?

My current objective is to write a program that generates a square with dimensions of 200 pixels by 200 pixels. The square should be colored using specific RGB values: red (red value of 255), green (green value of 255), blue (blue value of 255), and magent ...

javascriptcssfunctionif-statementdebugging

Tips for avoiding the babel/cli accessibility issue during Google Cloud deployment

I've encountered an issue while attempting to deploy my modularized Node.js Google cloud function to Google Cloud Platform. The function works smoothly on my local machine, but I'm getting an error during deployment that reads: ERROR: (gcloud.fu ...

javascriptnode.jsnpmgoogle-cloud-functionsbabeljs