Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed.

Here is the HTML code:

<div id="main-content" class="container animated">
  <div id="content">
    <article class="post-65 post type-post status-publish format-standard hentry category-thoughts tag-example tag-standard tag-tag item-list">
      <div class="post-format-icon">
        <a href="<?php echo get_permalink(); ?>" class="item-date"><span><?php the_time('j') ?></span><small><?php the_time('M') ?></small></a>
      </div>
    </article>
  </div>
</div>

You can view the JS Fiddle here. The date may not be visible due to PHP. In this case, the logo should change to show the date when hovered over.

Thank you!

javascriptjqueryhtmlcss

Answer №1

Using CSS, achieving this effect is quite simple. All you need to do is hide the image within the anchor tag and display something else upon hovering over it, like so:

<a href="#foo">
    <div>02-01</div>
    <img src="http://placekitten.com/100/100" />
</a>

a div, a:hover img {display:none;}
a:hover div {display:block;}

Check out the example in action by visiting this fiddle: http://jsfiddle.net/gwDWS/

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

What is the preferred method for accessing nested object properties in React props?

Building upon a previous inquiry - Javascript - How do I access properties of objects nested within other Objects It appears that standard dot notation doesn't suffice for accessing nested object properties within React state/props. In the case of t ...

javascriptreactjs

How to Retrieve HTML Content from an Azure Function Using C#

I created an Azure function using C# that generates HTML content. However, when I access it from a web browser, the response is displayed as plain text instead of rendering as HTML. After some research, it seems like I need to define the ContentType header ...

c#htmlazure-functionscontent-type

React component failing to render even when event is triggered

For my latest project, I am creating a blog using react, next.js, and json-server. The blog is coming along nicely with dynamically loaded blog posts and UI elements. However, I've hit a roadblock when it comes to loading comments dynamically. The sp ...

javascriptreactjsnext.js

Exploring the KEY attributes within a JSON dataset

In my React project, I am working on displaying specific key values from a JSON response. For example, the fieldData {DMR_5_why_who_test: "test", why: test}. My goal is to only show the bolded or key values in my output. However, my current code is not a ...

javascriptarraysnode.jsreactjsnpm

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

"Enhance your website with the magic of jQuery magnific-popup

Is there a way to add an additional button to the jquery magnific-popup component that can close the dialog box? I am currently utilizing this component to insert descriptions for photos, so I need a submit button that will successfully add the descriptio ...

javascriptjqueryjquery-uijquery-dialog

The Node.js application gracefully exited with code 0 with Forever

Running a Node.js Express app on CentOs 6.5 using the root account: root@vps [/home/test/node]# npm start app.js > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaee9e809e809f">[email protected]</a> s ...

javascriptnode.jsexpressforever

HTML text not lining up with SVG text

Why is the positioning of SVG Text slightly off when compared to CSS text with the same settings? The alignment seems awkwardly offset. Any help in understanding this would be much appreciated! Even with x: 50% and the relevant text-anchor property set to ...

javascripthtmlreactjssvg

What is causing my Directive to trigger the error "Error: $injector:unpr Unknown Provider"?

I have been diligently working on updating my Controllers, Factories, and Directives to align with the recommended Angular Style Guide for Angular Snippets. So far, I have successfully refactored the Controllers and Factories to comply with the new style ...

javascriptangularjsangularjs-directive

transferring information between pages in nextjs

Currently in the process of developing a website, specifically working on a registration page for user sign-ups. My main challenge at the moment is validating email addresses without using Links. I need to redirect users to a new page where they can see if ...

javascriptreactjsnode.jsnext.js

Why does my Visual Studio Code always display "building" when I launch an extension?

https://code.visualstudio.com/api/get-started/your-first-extension I followed a tutorial to create a hello world extension. Why does my VSCode always display 'building' when I run the extension? Executing task: npm run watch < [email p ...

javascriptnode.jstypescriptvisual-studio-code

Encountering a 404 error when attempting to make an Axios post request

Utilizing Axios for fetching data from my backend endpoint has been resulting in a 404 error. Oddly enough, when I manually enter the URI provided in the error message into the browser, it connects successfully and returns an empty object as expected. Her ...

javascriptnode.jsexpressvue.jsaxios

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

What is the best way to incorporate a fresh array into the existing array element stored in local storage?

I stored a group of users in the local storage: let btnSignUp = document.getElementById("btnSignUp"); btnSignUp.addEventListener('click', (e) => { let existingUsers = JSON.parse(localStorage.getItem("allUsers")); if (existingUsers == null ...

javascriptjqueryhtmlcss

No action is triggered after submitting AJAX data in a WordPress environment

I'm currently working on developing a WordPress plugin that requires querying the database. However, I am facing challenges in getting it to function properly. Here is the code snippet that I have attempted: jQuery('#demo_ajax').submit(func ...

javascriptphpjqueryajaxwordpress

What is the best way to incorporate material-ui icons into my project?

I'm trying to incorporate an icon inside an IconButton, like so: <IconButton > <SearchIcon/> </IconButton> After adding @material-ui/icons to my package.json file and importing the necessary components: import IconButton from ...

javascriptreactjsnpmmaterial-ui

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

phpjqueryhtml

Displaying properties of a class in Typescript using a default getter: Simplified guide

Here is an interface and a class that I am working with: export interface ISample { propA: string; propB: string; } export class Sample { private props = {} as ISample; public get propA(): string { return this.props.propA; } public se ...

javascriptangulartypescriptgetter-setter

Tips for customizing the time selector in material-ui-time-picker

Is there a way to enable keyboard input control for the material-ui-time-picker? Currently, it only allows editing when clicking on the clock interface. Here is a snippet of my code: import React, { Component } from "react"; import { TimePicker } from " ...

javascriptreactjsmaterial-uitimepicker

Upon redirection, my JavaScript codes cease to function properly and require a page refresh to resolve

Upon redirecting to another page with included JS codes, my main.html does not function properly until I refresh the page. What steps can be taken to resolve this issue? 0.html <body data-theme="b"> <div class="p2" data-role="page" id="p2"> ...

javascriptjqueryhtmlajax