Is inline CSS the way to go when styling a:hover?

Trying to create a navigation bar for my new website, I want each button to change color when highlighted. Using <ul> to make the navigation bar, is there a way to use "a:hover {background:#;}" as inline CSS on a specific element?

Attempted to assign ids to each <li> or <a> and reference them in an internal style sheet, but can't get it to work. Here's what I have so far:

#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px} 
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}  
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'>XML</a></li>
   <li><a href='#'>SQL</a></li>
   <li><a href='#'>Java</a></li>
   <li><a href='#'>C#</a></li>
</ul>
</div>

New to html and CSS for just 1 week, please forgive any beginner mistakes. Thank you.

htmlcsshover

Answer №1

It is not at all feasible; my apologies.

One alternative would be to generate a CSS class for every color and assign the respective class to each link:

#menu a.red:hover { background: red; }

Answer №2

To achieve this effect without adding a class to each new li element, you can utilize the :nth-child(X) pseudo-class. I made some adjustments by moving the background-color styling to the li elements and added a few additional CSS properties.

Below is the CSS code for applying colors:

#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }

View Demo

+ Learn more about :nth-child

Answer №3

One way to make this happen is by using jQuery!

$(document).ready(function() {
    $('a').mouseover(function(){
        $(this).parent().css({background-color: 'yellow'});
    });
});

Answer №4

Using inline javascript

<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>

A draft of the CSS2 specification mentioned the ability to use pseudo-classes inline:

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}
      :visited {color: green}
      :hover {background: yellow}
      :visited:hover {color: purple}
     ">
</a>

However, this feature was not implemented in the final release of the spec.

http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules

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

Manipulating background scrolling using jQuery

I had a vision of creating a logo with PNG transparency and a scrolling background that would give the appearance of being made in Flash. To achieve this effect, I utilized the jquery.backgroundPosition.js plugin for enabling background scrolling. Here is ...

jqueryhtmlcss

Loading content beforehand vs. loading it on the fly

I am facing a dilemma with loading a large amount of content within a hidden <div>. This content will only be revealed to the user upon clicking a button. Should I load this content beforehand or wait until it is requested? ...

javascriptjqueryhtmlajax

What could be causing the malfunction in my JavaScript random selector?

Can anyone assist me with this issue? I'm attempting to implement JavaScript functionality to highlight randomly selected picks that I input, but it's not functioning correctly. Every time I inspect my JS code on the webpage, I encounter an erro ...

javascripthtmlcsshighlight

"Marquee animation functions correctly on the emulator but fails to display on the physical

Greetings! I recently incorporated a marquee tag into my application, and it functions properly in the Android simulator. However, once I install it on my device, the marquee does not display. Below is the code I used for the marquee: <marquee behavi ...

jqueryhtmljquery-uijquery-mobile

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

javascriptjqueryhtmlajax

problem encountered while trying to save or submit a web form using selenium and python

For days now, I've been struggling to save a form after filling out all the fields. Clicking on the save button doesn't do anything - the page just stays the same with no indication that anything was saved and no errors popping up. Below is an e ...

javascriptpythonhtmlajaxselenium

Center two elements within a div container both horizontally and vertically

I am trying to vertically center a text and a button within a container. The text should be positioned in the middle of the div, while the button should be aligned to the right. What is the best way to achieve this layout where the text element is centere ...

htmlcss

The href link does not direct to the main landing page

Clicking on the 'Visit website' button does not redirect me to home.html. Instead, it does nothing. How can I fix this issue? Any help would be appreciated. Preview.prototype = { create : function() { // Creating the Preview structur ...

javascripthtmlhrefhttp-redirect

Content is the main driver for CSS Flexbox dynamic aspect-ratio code

When creating a grid layout for a webpage, I opted to use Flexbox. My goal was to incorporate some automatic functionality so that additional grid boxes could be included without the need to manually add classes or styles in the HTML code. One particular f ...

cssflexbox

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

htmlvue.js

Resetting jquery mobile form input after submission

I have a form within my jQuery mobile framework and I am trying to reset the input fields' values after they have been submitted. I have searched for solutions but I am struggling to make it work properly. Here is the jQuery code: $(document).ready( ...

jqueryhtmlformsjquery-mobile

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

htmlcsscross-browseropera

I am facing an issue where cookies are not being saved in the browser when calling from the client side using Axios. However, it works perfectly fine when calling from the server side. I am unsure of

Clarification of the issue When I run it from the server side, i.e., http://localhost:3001, the cookie is saved in my browser without any issues. However, when I call it from the client side using const result = await Axios({ method: "post", url: "http:// ...

phphtmlnode.jsreactjsapi

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

htmlcss

Is there a way to assign a numerical value to the data attribute of the "p" tag?

As beginners in coding, we are introduced to various value types such as strings ("Hello"), booleans (true), and numbers (1). I am curious, how can I assign a number value to a <p> tag instead of a string? Is there a specific number tag that should ...

javascripthtml

Update picture using Vanilla Javascript for mobile display

I am looking to change my logo color to white when viewed on mobile devices. Currently, I have the following code for changing the logo on scroll using vanilla JavaScript. The code toggles between a dark and light logo based on the scroll position. Howev ...

javascripthtml

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

javascriptjqueryhtmlcssnicedit

Determining the dimensions of a div with a scrollbar using Jquery

Is there a way to get the width and height of a div with scroll that includes both visible and hidden content using JQuery? If anyone has a solution for getting these values, please share. <div id="area" class="divLeftCem area"> <div id="pan ...

javascriptjqueryhtmlcss

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

Execute PHP function by clicking on an HTML anchor tag

I'm curious - can a PHP function be triggered simply by clicking a link, or is it better to stick with the form submit method? If linking works, where should the reference point to? Check out this code snippet: <?php session_start(); func ...

phphtmlfunction