Enable the hover font color effect to be applied to the entire li box

Is there a way to change the font color to #fff when hovering over the entire li box, instead of just the href link? Currently, the hover color switches between #fff and #666 because the full li box is not considered a link.

In case it's relevant, this html code is created by the Google RSS widget and Google's stylesheet can be found here. However, as far as I can tell, there are no conflicts present.

#my-feed {width:180px;}
#rss-title {font-size:12px; color:#fff; text-align:center; padding:3px; background-color: #cc6600;}
#rss-title a {color:#fff;}

#rss-feed li {
list-style: inside none none;
font-size:12px;
padding:5px 5px 5px 20px;
line-height:14px;
text-indent: -10px;
}

#rss-feed li a {color:#666;}
#rss-feed li a:hover {color:#fff;}
#rss-feed li:hover {color:#fff;background-color:#cc6600;}
#my-feed ul li:before { content: "\00BB \0020";}
<div id="my-feed">
<div id="rss-title">
<a href="http://example.com">My Title</a>
</div>

<ul id="rss-feed">
<li><a href="http://example.com/first">My First Link</a></li>

<li><a href="http://example.com/second">My Second Link</a></li>

<li><a href="http://example.com/third">My Third Link</a></li>

<li><a href="http://example.com/fourth">My Fourth Link</a></li>
</ul>
</div>

Answer №1

Opt for

#rss-feed li:hover a {color:#fff;}
over
#rss-feed li a:hover {color:#fff;}

#my-feed {width:180px;}
#rss-title {font-size:12px; color:#fff; text-align:center; padding:3px; background-color: #cc6600;}
#rss-title a {color:#fff;}

#rss-feed li {
list-style: inside none none;
font-size:12px;
padding:5px 5px 5px 20px;
line-height:14px;
text-indent: -10px;
}

#rss-feed li a {color:#666;}
#rss-feed li:hover a {color:#fff;}
#rss-feed li:hover {color:#fff;background-color:#cc6600;}
#my-feed ul li:before { content: "\00BB \0020";}
<div id="my-feed">
<div id="rss-title">
<a href="http://example.com">My Title</a>
</div>

<ul id="rss-feed">
<li><a href="http://example.com/first">My First Link</a></li>

<li><a href="http://example.com/second">My Second Link</a></li>

<li><a href="http://example.com/third">My Third Link</a></li>

<li><a href="http://example.com/fourth">My Fourth Link</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

Tips for arranging 3 cards in a straight line across the horizontal axis

I'm new to coding and I've recently started using HTML, CSS, and Bootstrap 4. Currently, I'm working on a webpage that includes a navigation bar, 4 cards, and a footer with information. I utilized Bootstrap to create rows and columns, but I& ...

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

Dynamically taking input in Vue JS while using v-for loop

Hey there! I'm trying to get input in this specific manner: itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}] Whenever the user clicks on the add button, new input fields should be added ...

Organize and eliminate items within a vessel

Looking to manipulate a container with span elements by removing two and re-arranging one. I attempted the following approach: $('span.class5').insertBefore('span.class0'); However, this inserted each span.class5 into every repeating ...

Update the input component's typing area line color from its default shade

Is there a way to customize the color of the line in the typing area for the input component? I haven't been able to find any information on using Sass variables or another method to achieve this. For reference, here is a Plunker example <ion-it ...

Control your thumbnails with the powerful iDangerous Swiper feature

Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...

Can we incorporate the radix-ui/colors variables into a CSS module file?

For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as ...

Navigate to the previous or next page using JavaScript

I've been struggling to figure out how to navigate one page up and down using simple links, but I haven't found a solution that works for me. The URL I am working with is: . When the "next page" button is clicked, it should go to ?page=2, and whe ...

What is the best way to make all <li> elements appear on one line above, regardless of the content within each <li>?

Is there a way to align all li elements on the same line regardless of their content? Check out this screenshot for reference: ? The main issue I'm facing is that when I try to code it, the content within each li element shifts the other lis like thi ...

Unable to input text into text fields or interact with buttons by clicking or hovering in a React form

I am new to React and currently working on a login page that asks for both a username and password. While I haven't implemented much logic yet, I have been exploring online resources to learn more. It appears that I should be able to interact with the ...

Define CSS styles based on the content of a specific cell within a table

Is there a way to target a <td> in CSS based on its content value? <table> <tr> <td>Name</td> <td>John</td> <tr> </table> For instance, how can I apply the color:bl ...

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

As I embark on creating a webpage, my goal is to have it display different content based on the user's browser. The SERVER [HTTP_USER_AGENT] variable initially seemed promising for this purpose, but upon inspecting the page in Chrome, I encountered: ...

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

Footer remains fixed and scrolls into the body when the window is resized

Having trouble with the footer's responsiveness when resizing the desktop window. It looks fine in developer tools, but in different browsers, the footer placement gets messed up and scrolls over the rest of the content. Any insights on what might be ...

Real-time console input/output feature for a gaming server utilizing either JavaScript or PHP

About My Minecraft Server: After running a Minecraft server in my basement for a few months, I realized that using TeamViewer to input commands and monitor the console was not ideal. The console of a Minecraft server provides a log of events with timestamp ...

"Utilize the canvas to crop and draw an image

Hello, I have an image with a size of 750x554. To load the image into an img tag, I use the following method: <input type="file" accept="image/*" onchange="document.getElementById('character').src = window.URL.createObjectURL(this.fi ...

Is it possible to create and access a PDF file using file handling in PHP?

In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...

Instructions for converting a MySQL select statement within a foreach() loop into an HTML form

I'm in the process of developing a course registration system for a small project. Currently, I have a table named 20182019carryovertbl from which I successfully select students who are carrying over their courses. Now, I need to transform this select ...

Issue with sending form data to MySQL database

I have a couple of forms that need to be submitted to my database. I created a general function to update a specified table, but the problem is that the code doesn't modify the database; it only changes the column (fullname) to zero. Below is my code, ...

Adding a border around the `<tr>` elements in a table

How can I add a border to the <tr> element (t_border), without the inner table inheriting the style from the outer one? <table> <tr> <td>A</td> </tr> <tr> <td> <ta ...