How can I make the text color change when the mouse hovers over it and revert back when the mouse moves away using HTML?

How can I use the onmouseover event to change the background color of a <td> element with the class 'topic_name'?

<td dir="rtl" class="topic_name" onmouseOver=""><\td>

The CSS for the 'topic_name' class is as follows:

.topic_name {
    font-family: tahoma;
    font-size: 10pt;
    font-weight: bold;
    text-transform: capitalize;
    color: #FFFFFF;
    text-align: center;
    background-color: #627AAD;
    padding: 0cm;
    margin: 0px;
    width: 255px;
    height: 35px;
    cursor: pointer;cursor=hand;
}
htmlcss

Answer №1

Implement the hover selector in CSS

.topic_name:hover{
   background-color: yellow;
 }

For a demonstration, check out this example

Answer №2

onmouseenter="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#627AAD';

Don't forget, utilizing a tool like jQuery can simplify your work ;)

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

Change the structure of the content in a div

Seeking assistance with a slider code that switches between two dividers, previous and next. Each divider currently displays ten images in two parallel vertical lines. I am attempting to modify the layout so that each divider showcases five images on two p ...

javascriptjqueryhtmlcss

"Exploring the Connection Between PHP, JSON, and

In my current class, we are collaborating on an android app project for our school. Due to the lack of physical meetings, I haven't had direct contact with some of my classmates. One member of the group has been responsible for programming the json an ...

phpandroidhtmljson

Is it possible to change the color of specific days of the week (like Mondays, Tuesdays, etc.) in JQueryUI's datepicker?

Is it possible to customize the appearance of specific weekdays (such as all Mondays, all Tuesdays for the entire year) in the JQueryUI datepicker by changing their color? While there are existing methods to select certain dates and disable holidays, I h ...

cssjquery-uidatepicker

Creating input fields using Vuejs

Currently, I am learning how to incorporate HTML content rendering in Vuejs. I'm experimenting with creating a small input component that is generated through the render function. Here is a snippet of what I have so far: export default { name: &qu ...

javascripthtmlvue.jsvuejs2vue-component

How to vertically center a div with Bootstrap framework in your website

I'm currently working with Bootstrap 4 and I am trying to vertically center the table div in the middle of the screen. I attempted using `align-items-center` on its parent element but it did not have the desired effect. Below is my HTML code: <di ...

htmlcssbootstrap-4

Issue with if statement when checking element.checked

Hey everyone, I'm currently working on a calculator app and running into an issue. I have set up 3 radio buttons and I would like to check them using an 'if statement' in my JS file. However, the problem is that the 'main' element ...

javascripthtml

Convert and transfer CSS image data encoded in Base-64 to Asp.Net MVC/WebApi

Regarding the query. I successfully displayed a base-64 encoded image on the client side. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDk ...

c#cssasp.netasp.net-mvcasp.net-web-api

Error message "Subquery is returning multiple rows during the second insertion"

Within my database, there are two tables: Table tblUser: +------+-----------+ | id | Name | +------+-----------+ In addition, there is another table called tblItems (which can store multiple checkbox values depending on user selection): +------+ ...

phphtmlinsertphpmyadmin

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

javascriptjquerycsswebforms

What is the minimum size a string must be in order to cause the innerHTML render to be disrupted?

Can anyone tell me what the byte limit is for interrupting the rendering of an innerHTML of a DOM element when using innerHTML = $string or .append()? Is it 1MB, 5MB, 10MB? Does it vary by browser? How can I determine this limit? EDIT (11/11/11): I con ...

htmlajaxinnerhtml

Tips for making radio button selection mandatory in an HTML5 form

How can I require a user to select one radio button in an HTML 5 form before submitting it? I attempted to use the required attribute, but since there is no radio button group, how can I apply this requirement? <form action="/Home/Sendtitle" method=" ...

htmlformsvalidationradio-buttonform-submit

Creating a nested div with a consistent image background

I have set an image background on the first div. Now, I am looking to create a div (illustrated here with an orange background) and another box placed "above" it for comments (referred to as the "comments box"). The issue I am facing is that I do not want ...

htmlcss

How can you get the selected option from a drop-down menu using JavaScript without using JQuery?

UPDATE: JSFiddle Link I'm facing some challenges with this task. I'm trying to keep my code clean without overusing unnecessary IDs or classes. The issue lies with a drop-down menu that offers speed options for displaying words in real-time on ...

javascripthtmlmenuelementintervals

Is it possible to have one div layer on top of another?

On my website, I have a line of text that is revealed when a dropdown arrow is clicked. However, there are certain pages where the divs extend beyond this single line of hidden text. For example: https://i.sstatic.net/2a6YB.png I need the green div (nor ...

htmlcss

Ways to prevent negative values from appearing in the text field

Check out this code snippet on Fiddle. I need help with a text field that should only display positive values. If the input is negative, I want it to be stored in ng-model but not shown in the textbox. function LoginController($scope) { $scope.number = ...

javascripthtmlangularjs

In certain instances, a modal popup may intermittently fail to hide after the page has finished loading, an issue observed

Upon page load, an ajax modal pop-up is displayed and then hidden once the loading process is complete. This functionality is defined within the master page. The issue arises when certain button clicks fail to trigger the window.onload javascript event, as ...

javascriptc#jqueryhtmlasp.net

Creating a tooltip that doesn't rely on any child elements

I've been experimenting with creating a tooltip that appears when hovering over an <a> tag and displays a <div> from another location For example: <p> blah blah <a class="tooltiphover">hover me</a> blah blah &l ...

javascripthtmlcsstooltip

Enable the use of CKEditor4 inline feature on various inline elements such as span and other

Is it possible to enable the CKEditor4 inline/contenteditable editing feature on <span> and other inline elements? I have searched the official documentation but cannot find any information on how to do this. Here is the markup I am using: <span ...

javascripthtmlckeditorcontenteditableinline-editing

Adjusting the Underline Navigation Effect with jQuery

My current setup includes a basic navbar with an up arrow that slides underneath it when a navigation title is clicked. The arrow initially rests between two nav titles, and when one of them is clicked, some text also slides in. I am looking to implement ...

jqueryhtmlcss

Table template incompatibility detected with Bootstrap

I have been attempting to recreate a template using a table as my foundation, but simply copying the code does not yield the same results. For reference, here is the table template I am using: Below is the code I have copied and pasted into my index.csht ...

javascriptjqueryhtmldatatablesbootstrap-4