background colour not applying in <a> tag-CodePudding

html

 <a ref={resume} href='../assets/resume.pdf' download onm ouseLeave={() => setMouse(true)} onm ouseEnter={() => 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

CodePudding user response：

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="#" >Link</a>

CodePudding user response：

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.

CodePudding user response：

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="" >Some Link</a>

  <a 
    ref={resume}
    href="../assets/resume.pdf" download 
    onm ouseLeave="{() => setMouse(true)}"
    onm ouseEnter="{() => setMouse(false)}"
    
  >Another Link</a>

 </body>
</html>

CodePudding user response：

Change className='resume-container' to . 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)} onm ouseEnter={() => setMouse(false)} whenever I tried this code out. Change the apostrophes to quotes with your href and wrap your Javascript in quotes.

Final result

 <a ref={resume} href="../assets/resume.pdf" download onm ouseLeave="{() => setMouse(true)} onm ouseEnter={() => setMouse(false)}" >Text</a>