css - 背景颜色不适用于 <a> 标记

标签 css reactjs

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;
    
    
    
    
}

所有其他属性似乎都有效,如果我将其设置为 div 它将起作用。但背景不适用于标签

最佳答案

CSS block 看起来不错,但 A 标记可能会受益于将一些内容括在引号中并将 className 更改为类。

<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>

关于css - 背景颜色不适用于 <a> 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71714587/

相关文章:

javascript - 在 React Native 中正确使用动画 API

reactjs - React 中的 PropType

javascript - 如何在 React Native 的一个功能组件中同时使用 props 和 navigation

reactjs - 在组件之间传递 Props

reactjs - 如何使用 Jest 和 react-testing-library 测试 Websocket 客户端

html - 在纯CSS中设置相对于其 parent 高度的 child 宽度

css - Firebug 的计算选项卡不再显示值的计算

html - 在 CSS 中使用 @font-face 使用 OS 9 资源分支字体

css - 禁止 WKWebView 缩放内容以呈现与 UIWebView 相同的放大倍数

html - 同时悬停到多个元素?