Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly.

Examples from YouTube & Reddit - https://i.stack.imgur.com/RXvg1.jpg

Here is the CSS code:

#verified {left: 10px; width: 9px;}
#verified {background: url(verifieds.png) 0 0;}
#verified:hover {background: url(verifieds.png) 0 -9px;}

And here is the HTML:

<p id="verified">test</p>

This is the result I'm getting: , but the hovering effect is not quite right. Any assistance would be appreciated!

htmlwordpresscss

Answer №1

If you want to test it out, click on this demo link.

#verified {
    padding: 0 5px 0 0;
    width:35px;
    height:18px;
    background: url(http://jirachi.net/hover/verifieds.png) no-repeat right center;
    cursor:pointer;
}

#verified:hover {
    background: url(http://jirachi.net/hover/verifieds.png) repeat-y right -9px;
}

Answer №2

When the user hovers over "verified," would you like the background to remain at 0 -9px? If so, simply include

#verified:active,

prior to #verified:hover

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

Transmit all Form Data via WordPress ajax

<?php add_action( 'admin_footer', 'my_action_javascript' ); function my_action_javascript() { ?> <script type="text/javascript" > jQuery(document).ready(function($) { var data = { action: 'my_action', ...

ajaxjquerywordpress

Toggle visibility of table row upon user click (HTML/JQuery)

Having an issue with showing or hiding table rows using jQuery. I would like it so that when a user clicks on a table row with id="jobtitle", the corresponding tr with class="texter" will either show up or hide if it is already displayed. This is my curre ...

javascriptphpjqueryhtml

Modifying the Header Background Color

Looking for help on my forum at The header background on my site needs fixing. I am trying to change the entire header background to match the color of the logo background, but I'm unsure what codes need to be adjusted. Can anyone provide guidance? ...

htmlcss

"Using jQuery to trigger a click event on a specific column within

Welcome to my HTML table. <table id="status_table" class="table table-bordered"> <tr> <th>Serial Number</th> <th>Product Number</th> <th>Description< ...

jqueryhtmlajax

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

htmlcssarticle

Utilizing local storage, store and access user's preferred layout options through a click function

Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their ...

javascriptjqueryhtmlcsslocal-storage

Text field value dynamically changes on key press update

I am currently working on the following code snippet: {% for item in app.session.get('aBasket') %} <input id="product_quantity_{{ item['product_id'] }}" class="form-control quantity" type="text" value="{{ item['product_quan ...

javascriptjqueryhtmlajaxonkeyup

What is preventing me from choosing the complete table?

I am currently working on a method to export tabular data from an HTML page to Excel using DocRaptor. My approach involves using PHP to pass the necessary data through their API for conversion into an Excel Spreadsheet. However, I have encountered an issu ...

jqueryhtmlcss

The submission of FormData to the PHP server is causing an issue

I am having an issue with sending the formData to my PHP script using AJAX. Despite inspecting the elements, I can't find any errors in the process. Below is the structure of my form: The input values are sent to a JS file onclick event. <form c ...

javascriptphphtmlajax

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

javascriptandroidhtmlcsswebview

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

`The ng-binding directive seems to be malfunctioning while ng-model is functioning properly

Currently, I am in the process of learning how to utilize Angular (1.3.10). My objective is to create two input fields that will specify the suit and value for a hand of playing cards. In my attempts to achieve this, I have encountered an issue. When I man ...

javascripthtmlangularjsangular-ngmodelng-bind

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

I am in the process of using dompdf for rendering a PDF file. Our application is built on Bootstrap 4 framework, and I want to incorporate it into the twig template used for generating our documents. However, I have encountered an issue with the Bootstrap ...

htmlcsspdfbootstrap-4dompdf

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

I am trying to figure out how to create two vertical divs that stay the same size and height when the browser is not on full screen. I want users to be able to use the body's overflow scroll function to read both DIV elements along the x and y-axis. ...

htmlcsscss-shapes

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

javascripthtmlcssspring-mvc

Eliminate all hover functionalities from the Kendo Menu component in ASP.NET MVC

Currently, I am working on a project and utilizing the Kendo Menu. However, the package includes hover styling that I do not want to use. Is there a way to disable or remove this styling? ...

cssasp.net-mvckendo-uikendo-asp.net-mvc

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

javascripthtmlcsstags

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

javascripthtmlnode.jsmustache