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块看起来不错,但A标记可能受益于用引号括起一些东西,并将className更改为仅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>
链接要求内容可见。
.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>
正如@Maniraj Murugan在他的评论中提到的,代码应该可以工作。一个可能的问题是,应用了另一个背景色属性,该属性阻止resume-container
类内的属性生效。
您可以尝试像这样添加!important
:background-color: #D4B44A !important
来覆盖以前的属性。
将className='resume-container'
更改为class="resume-container"
。a
标记还要求您有文本以便显示,在您提供的代码片段中既没有文本也没有结束标记。每当我尝试这个代码时,href='../assets/resume.pdf'
和onMouseLeave={() => setMouse(true)} onMouseEnter={() => setMouse(false)}
也会出现问题。用href将撇号改为引号,并用引号包裹Javascript。
最终结果如下。
<a ref={resume} href="../assets/resume.pdf" download onMouseLeave="{() => setMouse(true)} onMouseEnter={() => setMouse(false)}" class="resume-container">Text</a>