Highlight hover background with fixed width using HTML and CSS

Is there a way to achieve a full width hover background effect on list items?

https://i.sstatic.net/o5Dmt.png

I want the gray background to extend fully towards the left. How can I accomplish this?

What steps should I take:

HTML:

<div class="col-md-5 col-xs-12 additonal-resources-cont">
                <h3 class="header-additnl-resources">Additional Resources </h3>
                <ul class="additional-resrc-ul nopadding">
                    <li><a href="" class="additional-resources-href">Login / Register</a></li>
                    <li><a href="" class="additional-resources-href">Request Samples</a></li>
                    <li><a href="" class="additional-resources-href">Technical Documentation</a></li>
                </ul>
            </div>

CSS:

.additional-resources-href:hover {
    background: #1daeeb;
    opacity: 4.5;
    background-color: #BFCDD5 !important;
}


.additional-resources-href {
    color: black;
    text-decoration: none;
}

.additional-resrc-ul li:before {
    content: "• ";
    font-weight: bold;
    color: #1DAEEB;
}

.additional-resrc-ul li:hover {
    background: #1daeeb;
    opacity: 4.5;
    background-color: #BFCDD5;
}

.additional-resrc-ul {
    margin: 0px;
    padding: 0px;
    margin-left: 10%;
    font-weight: 300;
    font-size: 10px;
    line-height: 3.5em;
}
htmlcss

Answer №1

If you want to create a design where pseudo elements overflow outside the list item and cover its entire width, you can achieve it like this:

.additional-resources-href:hover {
  background: #1daeeb;
  opacity: 4.5;
  background-color: #BFCDD5 !important;
}

.additional-resources-href {
  color: black;
  text-decoration: none;
}

.additional-resrc-ul li {
  position:relative;
}
.additional-resrc-ul li:before {
  content: "• ";
  font-weight: bold;
  color: #1DAEEB;
}

.additional-resrc-ul li:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  right: 0;
}

.additional-resrc-ul li:hover {
  
  opacity: 4.5;
}

.additional-resrc-ul li:hover::after {
  background: #BFCDD5;
}

.additional-resrc-ul {
  margin: 0px;
  padding: 0px;
  margin-left: 10%;
  font-weight: 300;
  font-size: 10px;
  line-height: 3.5em;
}
<div class="col-md-5 col-xs-12 additonal-resources-cont">
  <h3 class="header-additnl-resources">Additional Resources </h3>
  <ul class="additional-resrc-ul nopadding">
    <li><a href="" class="additional-resources-href">Login / Register</a></li>
    <li><a href="" class="additional-resources-href">Request Samples</a></li>
    <li><a href="" class="additional-resources-href">Technical Documentation</a></li>
  </ul>
</div>

Answer №2

In this section, the menu is designed using flexbox with a column layout. Each item in the menu has a hover effect applied to it along with a smooth transition.

.container{
  display: flex;
  justify-content: space-between;
 }

.resources-list{
  display: flex;
  flex-direction: column;
  flex: 0 0 20%;
}

.resources-item{
  transition: all 250ms linear;
}

.resources-item:hover{
  background-color: gray;
}

.resources-item:before{
  content: '• ';
}

.app-content{
  flex: 0 0 75%;
}
<div class="container">
        <div class="resources-list">
            <h3>Resources List</h3>
            <div class="resources-item">lorem3</div>
            <div class="resources-item">lorem3</div>
            <div class="resources-item">lorem3</div>
        </div>
        <div class="app-content">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia illum voluptates. Cumque earum cupiditate explicabo dolorum, praesentium dolor quia consequatur incidunt iste excepturi blanditiis dolores quibusdam odio quas quo.
        </div
    </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

Formula for full width skew in three adjacent divs using SkewX() function

.container { height: 500px; width: 500px; position: relative; background: black; } .box { transform: skewX(20deg); width: 33%; height: 100%; position: absolute; } .first-box { background: purple; left: 0; } .second-box { background ...

htmlcsscss-transformsskew

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

javascriptjqueryhtmlangularjsajax

Ways to retrieve a webpage component that has multiple values within its class attribute

My dilemma lies in this HTML snippet: https://i.sstatic.net/E7zj0.png Within the code, there are two instances of <div class="sc-fjhmcy dbJOiq flight-information"></div>. I am trying to target these elements using their class attribu ...

htmlxmlselenium-webdriverweb-scrapingconsole

How can I use jQuery to prevent a click function from running when input fields are left empty

I have step cards with input fields on each card. A "Next" button is provided for each card to change the view. However, I need to prevent the "Next" button from functioning if any input fields on the form are left empty. Below is the code snippet: va ...

javascriptjqueryhtmlcss

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

cssheight

"Troubleshooting: When using the Script tag in EJS, conditional IF statements may not function

I encountered an issue here. I placed a script tag inside an IF conditional statement. However, the script tag runs whether the condition is TRUE or FALSE. For instance: <% if (info) { %> <p><%=info%></p> <scrip ...

javascripthtmlnode.jsexpressejs

How do I implement a scroll bar for a specific section on a webpage?

After finding the solution to this particular question, I encountered a similar issue on a different page. <div style="white-space: nowrap;"> <span style="display: inline-block; width: 280px">...</span> <span style="display: ...

htmlcsshorizontal-scrollingvertical-scrolling

Pressing the button results in no action

I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...

javascriptphphtmlxml

Activate the console.log functionality if it has been previously turned off

When working on a project, I noticed that console.log is disabled. Although Firefox alerts me about this, I don't have the time to locate where in the code it's disabled. Is there a method for overriding the disabling of console.log specifically ...

javascriptjqueryhtmldeveloper-toolsconsole.log

Does closedXML have the capability to generate an HTML table for export into Excel?

My dynamically generated HTML table contains the following tags: table, th, thead, td, tbody, tr and a div at the end This table also includes colspans. Is it possible for closedXML to directly import this table into a worksheet and output it as XML? ...

c#html.netexcelclosedxml

What steps are involved in sending a POST request from a web browser?

I am currently developing a Java server that needs to handle requests sent from a browser. However, I am encountering an issue where the browser is only sending an OPTIONS request instead of the POST request that I need. The error message in the browser is ...

javascriptjavahtml

CSS - Issue with dropdown sub-menu alignment despite using absolute positioning in relation to parent button

Title fairly explains it all. I'm having trouble getting my dropdown submenus to align perfectly with the bottom of the parent list item element. The list item has a relative position, while the submenu has an absolute position. I've attempted ...

htmlcssdrop-down-menusubmenu

Revamp the hues of numerous elements simultaneously using just a single click!

Is there a way to change the colors of various elements (footer, divs, text) background and text color at once using just one button? I attempted to use JavaScript buttons, but I'd prefer not having to name each individual object's button in orde ...

javascripthtmljquerycss

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

javascriptjqueryhtmlcss

Adjust iFrame size if the width of the screen is lower than x

My website includes an iFrame showcasing a 990x90 advertisement. I am looking for a solution to ensure that mobile viewers can also see the ad on their devices. I need the iframe to resize proportionately based on the screen width; for instance, if the sc ...

htmliframe

Comparing input size attribute to div width attribute

I have a situation in my html page where I need an input component and a div component to be the same width. The input has a size attribute of 30, but using the style attribute with "width: 30ch" or "width: 30em" for the div doesn't seem to work as ex ...

htmlcss

I am encountering issues with an HTML table that is in need of fixing, and I must find a solution without relying on

Can someone help me troubleshoot the structure of this table in the given image? It seems like my rowspan and colspan attributes are not working as expected. I've only used CSS to specify the width and height of the cells. https://i.sstatic.net/VtHbH ...

htmlhtml-table

Ways to restrict the width of an HTML webpage?

Is there a way to ensure that a web page's width is consistently set at 1000px, similar to popular sites like Facebook and StackOverflow? I've encountered issues with the site not resizing as needed, resulting in a scroll bar when the browser win ...

html

Fix for JqGrid Height Issue Not Functioning as Expected

The implementation of jqgrid on my webpage has a fixed height requirement, where users should be able to scroll down if there are more rows. While this works well for tables with many rows, I am facing an issue with tables that have fewer rows. In these ca ...

htmlcssjqgrid

Internet Explorer does not offer support for stopping scrolling using either jQuery or CSS

I have created an overlapping screen similar to Facebook's photo viewer, and it works well on Chrome, Safari, and Firefox. However, I am struggling to make it work on Internet Explorer (IE). The issue is that the div overlaps correctly but allows scro ...

javascriptjqueryhtmlcss