Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover state. Can anyone provide guidance on how to script this? Thank you.

#navbar a.blogbox {
    background-color: #E4E9E7;
    padding: 3px;
    margin-left: 4px;
    border-left: none;
    text-transform:uppercase;
    font-weight: bold;
    color: #c52a45;
}

<div id="navbar">
  <ul>
      <li class="activepage">HOME</li>
      <li><a href="aboutus.html">about us</a></li>
      <li><a href="page1.html">page 1</a></li>
      <li><a href="page2.html">page 2</a></li>
      <li><a href="page3.html">page 3</a></li>
      <li><a href="page4.html">page 4</a></li>
      <li><a href="contact.html">contact</a></li>
      <li><a class="blogbox" href="/blog/index.php">Blog</a></li>
    </ul>
</div>
css

Answer №1

Is this the desired outcome?

#topbar a.menuitem {
    background-color: #E4E9E7;
    padding: 3px;
    margin-left: 4px;
    border-left: none;
    text-transform:uppercase;
    font-weight: bold;
    color: #c52a45;
}
#topbar a.menuitem:hover {
    color: green;
}
<div id="navbar">
  <ul>
      <li class="activepage">HOME</li>
      <li><a href="aboutus.html">about us</a></li>
      <li><a href="page1.html">page 1</a></li>
      <li><a href="page2.html">page 2</a></li>
      <li><a href="page3.html">page 3</a></li>
      <li><a href="page4.html">page 4</a></li>
      <li><a href="contact.html">contact</a></li>
      <li><a class="menuitem" href="/blog/index.php">Blog</a></li>
    </ul>
</div>

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

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...

htmlcssinternet-explorercross-browserwebfonts

Why is this element occupying an excessive amount of space horizontally?

I've been diligently working on a unique custom WordPress theme as part of a school project. Our task is to redesign the homepage of an association, in my case, a theater group. One of the challenges I encountered was customizing the WordPress menu t ...

htmlcsswordpresswidth

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an image: <div style="display:inline-block;vertical-align:bottom"> <p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p> </div> ...

htmlcssimagepositioning

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

htmlcss

Is there a way to ensure consistent border thickness in a material-ui table layout?

In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...

cssmaterial-uifrontend

Revamping Footer Text

Hey there, I'm feeling a bit inexperienced with this question, so after struggling on my own for a while I decided to turn to stackoverflow for help. So, I have a website located at , and at the very bottom of the page there's some copyright inf ...

htmlcsswordpress

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

htmlcss

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Expansive dropdown options in the navigation bar

Can someone help me create a menu similar to the one in this screenshot? I am looking for a solution where hovering over a cursor will open a large submenu with two sections. Any examples or suggestions would be greatly appreciated. Thank you all in advan ...

htmlcssnavbar

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same he ...

csscss-grid

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss

Erase the dynamically loaded page using ajax and conceal the div

Currently, I am utilizing the .on() method with jQuery to display a specific div, and also using .load() to fetch a particular div from a web page hosted on my server. My query is how can I close this div when clicking outside of it, along with removing i ...

javascriptjquerycssajax

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss

Troubleshooting: EJ Syncfusion React Scheduler Issues

I have recently implemented a syncfusion calendar for managing appointments in my ReactJs project, following the code examples from this link . After editing the JS and CSS codes (available at ), I encountered an issue with the CSS not displaying correctl ...

javascriptcssreactjssyncfusionej2-syncfusion

Deleting a tag from a Flask document

Styling my form has been a challenge with Flask, particularly in regards to the picture field. I'm struggling to remove the "No file chosen" text and style the upload button using CSS, despite incorporating Bootstrap into my file. When hovering over ...

htmlcssflask

The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below). The rele ...

htmlcssresponsive-design