Eliminate the hovering effect from images that are hyperlinked

I am feeling incredibly desperate as I have spent hours searching the internet for a solution with no success.

When it comes to text links, I have included the following CSS code:

a:hover img {
border-bottom: none !important;
}

However, this code is also causing a thick black underline on linkable images which is ruining the overall appearance of my website.

Is there a way to remove the border-bottom on linkable images when they are being hovered over using CSS?

I have tried various codes but have been unsuccessful in resolving the issue:

a img, a:hover img {
border-bottom: none !important;
text-decoration: none !important;
}

So far, nothing has worked!

I would greatly appreciate any assistance with this problem. While it may seem like a small detail to some, it means everything to me.

Thank you in advance!

To better understand the issue, please take a look at:

The logo in the left fold-out menu is also affected by this problem.

Best regards

m

javascriptjqueryhtmlcss

Answer №1

Your issue arises from

a:hover { border-bottom: 3px solid #000; }

which adds a border to all a elements when hovered over. However, the CSS rules provided remove the border from img elements that are descendants of a/a:hover. Since the img elements initially did not have the border, this action does not change anything and the border on the a containing the image remains visible.

Considering you have class="thumb-wrap" on the main images, perhaps try 

a.thumb-wrap:hover { border-bottom: none; }

If you require a more general solution, you may want to:

  • Add a specific class to all image links (a elements with img) and set its style to border-bottom: none;
  • Apply styling only to text links by creating a class with border-bottom: 3px solid #000;
  • Utilize JavaScript for dynamic style application. With jQuery, you could use 
    $('a').has('img').css('border-bottom', 'none')

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

Sort Messages By Date Created

While using Vue, I encountered a general JavaScript question. I am fetching cat messages from an API for a chat interface. The initial call returns an array of objects where each object represents a chat message: data: [ {id: 1, created_at: "2022-05 ...

javascriptarraysvue.jsjavascript-objects

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

All hyperlinks are displayed as a single entity

I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue? After updating my code to include the entire div, it seems that there is something within the ...

htmlcss

Integrate your React Native application with a Node.js backend on your local machine

My attempt to establish a connection between my react native app and my node.js app on a Windows system has hit a roadblock. While I am able to receive responses from the node API using Postman, the response from the react native app is coming back as unde ...

javascriptreactjsnode.jsreact-native

Join the Observable in Angular2 Newsletter for the latest updates and tips

One of my functions stores the previous URL address. prevId () { let name, id, lat, lng; this.router.events .filter(event => event instanceof NavigationEnd) .subscribe(e => { console.log('prev:', this.previo ...

javascriptangulartypescript

blur event triggered on a cell within a table

Currently, I am using the code snippet below to populate data using a data table. My goal is to be able to edit the data in one of the columns and then validate the value after editing using the onblur event. I attempted to call the onblur event on the t ...

javascriptjqueryhtml

Is there a way to verify the presence of a particular value in a list?

I need to validate the content of all li tags within a ul list. If any list item contains the text "None," then I want to append specific text to a div. If no li tag includes "None," then different text should be added to the div. Upon checking my code, I ...

javascript

Is it possible to update the URL dynamically in a Next.js application without relying on the <Link> component?

I'm looking for a way to dynamically change the URL on a page without using <Link>. Specifically, I want to switch to a different URL when a variable changes from false to true, regardless of user interaction. Currently, I'm achieving this ...

javascriptreactjsnext.js

Is it possible to check if something is "ready" by using a combination of setTimeout and recursive functions?

I am currently working on a solution to determine when an asynchronous call is "ready" or not. I have a function that uses $.ajax which, upon success, sets a boolean variable in the global scope and some other data. Prior to making the ajax call, the boole ...

javascriptjquery

Selenium's ByChained, By.CssSelector, By.XPath, and ByJQuery.ByJQuerySelector are not meeting my expectations in terms of functionality

I'm struggling with identifying a specific selector. My NUnit test keeps failing when it reaches the selector. I need some assistance to correct this issue. Let's dive into an example. Here is the HTML code: <div class="form-item required ro ...

c#jqueryselenium-webdrivercss-selectors

Encountering an error message that states "Unable to access property 'props' of null object while filling

Can anyone help me figure out the error in my React component code below? import React, { Component } from 'react'; import { Input} from 'antd'; import Form from '../../components/uielements/form'; import Button from '.. ...

javascriptreactjs

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

How to properly handle string escaping within a JSON object

When I send this object as JSON response, it includes double backslashes in the URL. {"__type":"http:\/\/example.com\/contracts\/documents\/rendering\/instructions\/1\/0"} My desired response is: {"__type":"http:& ...

javascriptnode.jsstringexpress

Using Node.js to update information within Firebase

Here's a problem I'm facing: I have a cron job running in Node.js that sends data to a Firebase database every minute. The issue is, even when there are no changes, the database still receives information. Take a look at my code snippet below: l ...

javascriptnode.jsfirebasefirebase-realtime-database

Executing a JavaScript function within the HTML body and passing a variable as an argument to the function

I recently created the following HTML code: <html> <title> Upload Infected File </title> <body> <header id = "header"> <h1 align="center">Upload Malware File</h1> <p align="center"> Pleas ...

javascripthtml

Click on the link to go to another page according to the drop-down option selected

Here's a puzzling query that even Google fails to address. I've got two pages: page-1 and page-2. On page-2, there is a <ul> element and a toggle-button-box with the following code: <ul> <li><button class="button is-checked ...

javascriptphpjqueryhtml5-canvasjquery-isotope

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

htmlcss

Issue with random pages where global header.php is not showing a specific image

I'm currently revamping a website that was originally developed using codeigniter. The backend is quite chaotic with no clear identifiers for anything. I recently updated the banner in the header.php file, adjusting the style to suit the requirements. ...

phphtmlcsscodeigniter

Guide to Setting the Color of a Link Using CSS

I’ve been attempting to change the color of an ALink using CSS, but it seems like I just can’t get it right. It’s clear that I’m missing something, as I’ve spent quite a bit of time tinkering with this seemingly simple issue and still can’t fi ...

htmlcss

Using Jquery's $.each() method within an ajax call can be a powerful

Is it possible for a jQuery each loop to wait for Ajax success before continuing when sending SMS to recipients from an object? I want my script to effectively send one SMS, display a success message on the DOM, and then proceed with the next recipient. O ...

javascriptjqueryajaxeach