Ensure that a link housed within a div does not possess dual hover effects

I'm struggling to achieve the desired hover state because there are two states triggered due to the link being inside the div button!

Intended Unhovered State -

Unexpected Hovered State -

Desired Hovered State -

HTML - 

<li>
    <div id="checkoutbutton">
      <p><a href="somegoogle.com">Print Pages</a></p>
    </div>
</li>

CSS- 

#checkoutbutton {
  width: 137px;
  height: 40px;
  background-color: #ffffff;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 1px solid #f49131;
  padding: 5px;
  color: #f49131;
}

#checkoutbutton:hover {
  background-color: #f46800;
  color:white;
}

#checkoutbutton a {
  color: #f49131;
  vertical-align: middle;
}
htmlcsshover

Answer №1

#custombutton {
    width: 137px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #f49131;
    padding: 5px;
    color: #f49131;
    text-align:center;
    cursor:pointer;
}
#custombutton:hover {
    background-color: #f46800;
}
#custombutton:hover a {
    color:white;
}
#custombutton p {
    margin: 0;
    padding: 0;
}
#custombutton a {
    color: #f49131;
    line-height: 40px;
    vertical-align: middle;
}
#custombutton a:hover {
    color:white;
}
<li>
    <div id="custombutton">
        <p><a href="somegoogle.com">Click Here</a>
        </p>
    </div>
</li>

Answer №2

Ensure the link is placed outside of the div.

<li>
  <a href="somegoogle.com">
    <div id="checkoutbutton">
      <p>Print Pages</p>
    </div>
  </a>
</li>

Answer №3

Utilize this CSS code in conjunction with the provided HTML to achieve your desired result. For a live demonstration, refer to this fiddle: https://jsfiddle.net/8uh2ytc4/

#checkoutbutton {
width: 137px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #f49131;
padding: 5px;
color: #f49131;
text-align:center;
cursor:pointer;
}
#checkoutbutton:hover {
background-color: #f46800;
}
#checkoutbutton:hover a {
color:black;
}
#checkoutbutton p {
margin: 0;
padding: 0;
}
#checkoutbutton a {
color: black;
line-height: 40px;
vertical-align: middle;
text-decoration: none;
}
li {
list-style-type: none;
}

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

Personalized hyperlink element with interjected spacing

I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM. Within my link component, I have d ...

htmlcssweb-componentshadow-dom

Bootstrap 4: Concealed and Revealed Columns?

Is anyone else experiencing an issue where xs is hidden in xs views? I have a hunch it might be due to changes in Bootstrap v4, but I'm curious if there's a way to still make it work without delving into the CSS. My current setup uses the default ...

csstwitter-bootstrapbootstrap-4

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...

javascripthtmlcssreactjs

table that can be scrolled horizontally

I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge aris ...

jqueryhtmlcss

The combination of Backbone.js and underscore.js is causing disorganized HTML code

When it comes to creating HTML elements, I typically use a combination of backbone.js and underscore.js. Here is an example snippet from my usual workflow: _.template($('#html-container').html(), this.model.toJSON()); I then append this code wh ...

jqueryhtmlbackbone.jsunderscore.jstemplating

Is the CSS for the selected option not functioning properly in Internet Explorer version 10?

$('#inputTest').on('input', function() { $('#helloSellect option').css({ display: "none" }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inputTe ...

javascriptjqueryhtmlcss

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

The checkbox is failing to display as checked even after its value has been dynamically set to true

Currently, I am immersed in a project within ASP.NET MVC that involves displaying data on a page where users can interact by selecting checkboxes to make changes. In cases where there are numerous checkboxes present, a "Select all Checkboxes" button become ...

javascriptjqueryhtmlasp.net-mvc

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

javascriptjqueryhtml

JavaScript call to enlarge text upon click

I'm struggling to figure out why my font enlargement function isn't working as expected. Below is the code for my font enlargement function: <script type="text/javascript> function growText() { var text = document.getElementBy ...

javascripthtmlonclick

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

javascripthtmljquerycsstwitter-bootstrap

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

javascriptcssreactjsmaterial-ui

Creating a Tree Checkbox using jQuery without relying on pre-made plugins

The data structure provided appears to be hierarchical, but I am unsure if it follows the Adjacency list or Nested List model. Regardless, it is relatively simple to gather this hierarchical data. For instance, to retrieve the entire tree, you can use: SE ...

phpjquerymysqlhtml

Disappearance of Chrome scroll bar without overflow-y condition

The live version of the page can be accessed here. It is divided into three main parts: Left sidebar Centered content Right sidebar To ensure that the right sidebar is scrollable, I have used overflow-y: scroll; right: -17px; to hide the scrollbar. Bot ...

javascriptjqueryhtmlcssgoogle-chrome

What could be causing the "keyframes method" in my css to not function correctly?

When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...

javascripthtmlcsscss-animations

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

I'm currently implementing PureCSS forms into my web application and facing a challenge with maintaining the stylish form validation while preventing the page from reloading. I discovered that I can prevent the page reload by using onsubmit="return f ...

javascripthtmlajaxformsyui-pure-css

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

What is the best way to reset input autocomplete styles?

I am working with a basic Bootstrap form that is submitted using JavaScript. Upon clicking the submit button, the data is processed and the input values are reset without the need to reload the page: if( json.success ) { $('#form_sendemail').f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Choosing a submenu with CSS

Hey everyone! I'm currently in the process of designing a WordPress template for my personal website, and I require assistance with creating a dropdown multilevel menu. So far, I have successfully configured WordPress to display the first submenu leve ...

htmlcsswordpress