Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur?

This is my CSS code:

a {
    color: #2b9af3;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
a {
    background-color: transparent;
}
a {
    color: #2b9af3;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
a {
    background-color: transparent;
}

a:hover {
    color: #33ccff;
    text-decoration: underline;
    transition: color 0.4s ease 0s;
}

Here's the HTML:

<a class="hx-back-to-top">Back to top&nbsp;&nbsp; <img src="http://dummyimage.com/7x9/000/fff" class=""></a>

Check it out on jsfiddle: http://jsfiddle.net/v8rv26dx/1/

Answer №1

give this a shot

a.hx-back-to-top:hover {
    color: #33ccff;
    border-bottom: 1px solid #33ccff; 
    transition: color 0.4s ease 0s;
}

in addition, the image now has an underline

Answer №2

Here's a suggestion: instead of underlining links on hover, why not add a border at the bottom for a similar effect?

a:hover {
    color: #33ccff;
    border-bottom: 1px solid blue; /* adds border bottom on hover */
    transition: color 0.4s ease 0s;
}


Check out this sample fiddle for a demonstration: http://jsfiddle.net/v8rv26dx/3/

Answer №3

To solve this issue, you can use the image as a background in CSS for the anchor element <a>, or as the background of a nested <span>.

Another option is to add a bottom border instead of underlining the text. Check out the recent response from newbie coder Sarah Smith for more details.

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

Are you receiving a response code 500 when making a request to a presigned URL?

I've been encountering an issue with generating presigned URLs for files from my S3 bucket. Although I can successfully read files and obtain a list of file contents, when attempting to create a presigned URL using the following code snippet: reports ...

What could be causing this minimal Angular - WebTorrent configuration to fail?

The setup appears to be quite straightforward. Check out the Webtorrent usage reference here This is how I have my setup: import WebTorrent from 'webtorrent'; @Component({ selector: 'app-root', standalone: true, template: `bla` ...

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...

Exploring the Depths of Scope Hierarchy in AngularJS

Upon inspecting the _proto__ property of an object I created, it is evident that it has been inherited from Object. https://i.stack.imgur.com/hcEhs.png Further exploration reveals that when a new object is created and inherits the obj object, the inherit ...

Customize the Hidden Footer in Wordpress

I have a question about the footer code in my theme. I want to remove the "Powered by WordPress" text, but I can't seem to find the solution here. Can someone please help me with this? <?php do_action( 'maxwell_before_footer' ); ?> & ...

Certain mobile devices experiencing issues with AngularJS filters

Currently, I am attempting to filter an AngularJS array by utilizing custom filters within a controller. The filters are functioning correctly on certain mobile devices, yet they are not working on others. Here is the code snippet that I am using: var a ...

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

Component inexplicably rendering multiple times

After encountering multiple re-renders in my code, I decided to comment out every line and discovered that the constant definition was causing the issue: const MyComponent = () => { console.log('render') // logs 4 times const myRef = useR ...

Is localStorage.getItem() method in NextJS components behaving differently?

I'm working on my nextjs application and I wanted to utilize the power of localstorage for storing important data throughout my app. Within the pages directory, specifically in the [slug].tsx file, I implemented the following logic: export default fu ...

Generating a QR code with a web link in Node.js

Currently, I am immersed in a project that requires me to generate a QR code with specific information using NodeJS. To kick things off, I've set up a canvas in HTML and transferred it to NodeJS. <canvas id="canvas" width="300" height="300">& ...

What is the best way to organize notifications by dates in a React application?

I'm currently working on a notifications component where I need to sort notifications by dates and then display them. Although I attempted the following code, it didn't work as intended: const result = notifications.notificationRows.sort((a, b) ...

Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...

Troubleshooting a JQuery AJAX Autocomplete problem involving PHP and MySQL

I am facing an issue with my autocomplete feature. It is functioning properly on one of my pages, but not on this particular page. Even though the correct number of entries is being retrieved, they all appear to be "blank" or are displayed in black text th ...

The property this.props.Values is not defined

I'm facing an issue with a page. Specifically, I am working with the value: this.props.CategoriesList. This value represents a list of categories. The problem is that when I click on a button to navigate to the page where this value is used, it shows ...

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

I'm currently working on generating a bar stack graph using the chart.js JavaScript library. My JavaScript array contains the following data: 0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"} 1: {labels: "01/01/2020 00:00:00", data: 774, ...

Which should I use - Angular directive or CSS selector, for better performance?

Currently expanding my knowledge on angular and exploring the capabilities of the ngClass directive. I have come across this interesting functionality: <li ng-repeat="language in languages" ng-class="{line:$even}">{{language}}</li> Alternativ ...

What is causing .attr('title') to retrieve the title of the element before?

UPDATE Flexslider now includes several callback spaces for use, making this functionality possible. after: function(){}, //Callback: function(slider) - Fires after each slider animation completes Thank you to everyone who contributed! LIVE CO ...

What can be done to resolve the slowdown caused by an Ajax request within the function?

I've implemented drag and drop functionality for saving images, but I'm facing an issue with getting an instant preview of the saved images. Whenever I try to send the image to the server using an ajax request, the image doesn't appear on th ...

How to maintain the selected value in a Vue.js dropdown even after the page is refreshed

When a user selects a value from a dropdown, it is pushed to the URL. If the page is refreshed, the dropdown should default to the selected value in the URL. This functionality is being implemented in Laravel. I have attempted the following approach, but w ...