'background colour not applying in <a> tag

html

 <a ref={resume} href='../assets/resume.pdf' download onMouseLeave={() => setMouse(true)} onMouseEnter={() => setMouse(false)} className='resume-container'>

css

.resume-container {    
    padding: 0;
    margin: 0;
    margin-left: .5vw;
    margin-right: .5vw;
    border-radius: 5px;
    position: relative;
    height: 5vw;
    cursor: pointer;
    
    text-align: center;
    text-decoration: none;
    background-color: #D4B44A;
    
    
    
    
}

all the other properties seems to work, and if I make that to div it will work. but background wont apply to tag

cssreactjs


Solution 1:[1]

The CSS block looks okay but the A tag might benefit from enclosing a couple things in quotes and changing className to just class.

<html>
 <head>
  <style type="text/css">
   .resume-container {    
    padding: 0;
    margin: 0;
    margin-left: .5vw;
    margin-right: .5vw;
    border-radius: 5px;
    position: relative;
    height: 5vw;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #D4B44A;   
   }
  </style>
 </head>
 <body>

  <a href="" class="resume-container">Some Link</a>

  <a 
    ref={resume}
    href="../assets/resume.pdf" download 
    onMouseLeave="{() => setMouse(true)}"
    onMouseEnter="{() => setMouse(false)}"
    class="resume-container"
  >Another Link</a>

 </body>
</html>

Solution 2:[2]

Links require content to be visible.

.resume-container {
  padding: 0;
  margin: 0;
  margin-left: .5vw;
  margin-right: .5vw;
  border-radius: 5px;
  position: relative;
  height: 5vw;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color: #D4B44A;
}
<a href="#" class="resume-container">Link</a>

Solution 3:[3]

As @Maniraj Murugan mentioned in his comment, the code should work. A possible issue is that there is another background-color property applied which prevents the one inside resume-container class to take effect.

You can try adding !important like so: background-color: #D4B44A !important to override the previous properties.

Solution 4:[4]

Change className='resume-container' to class="resume-container". An a tag also requires you have text so that it will display, in the code snippet you provided there is neither text nor a closing tag. I also had problems with href='../assets/resume.pdf' and onMouseLeave={() => setMouse(true)} onMouseEnter={() => setMouse(false)} whenever I tried this code out. Change the apostrophes to quotes with your href and wrap your Javascript in quotes.

Final result below.

 <a ref={resume} href="../assets/resume.pdf" download onMouseLeave="{() => setMouse(true)} onMouseEnter={() => setMouse(false)}" class="resume-container">Text</a>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Zach Jensz
Solution 3 Alon Barenboim
Solution 4

Related Questions