[英]Dynamically changing font-size
This is my current code but as you see, whenever the font-size changes doe to the resizing of the browser width. 这是我当前的代码,但是正如您所看到的,每当字体大小发生变化时,浏览器宽度的大小都会改变。 The hover effect doesn't 1.5x the font-size, how can I make the hover effect dynamically take the current font-size of the text and double it up (1.5x) accordingly? 悬停效果不是字体大小的1.5倍,如何使悬停效果动态地获取文本的当前字体大小并将其相应地加倍(1.5x)?
----> https://jsfiddle.net/054yzoux/ <--------- ----> https://jsfiddle.net/054yzoux/ <---------
html html
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
css 的CSS
.navbar-menu ul li{
display: block;
font-size: 4vw;
margin-top: 5%;
}
.navbar-menu ul li:hover{
color: #fff;
transform: translateX(3%);
background-color: #888888;
transition-duration: 0.3s;
font-size: 2em;
}
Issue To see what the issue is, increase the browser width, when in the jsfiddle and hover over the text. 问题要查看问题所在,请在jsfiddle中将浏览器宽度增加并悬停在文本上方。 As you see the text decreases instead of increasing by 50% 如您所见,文字减少而不是增加50%
The problem is arising because for a fixed view, maybe 4vw is less than the 2em on hover that's why it is enlarging the font , but for larger views 2em is smaller than 4vw that's why the glitch effect . 出现此问题的原因是,对于固定视图, 也许4vw小于悬停时的2em ,这就是放大字体的原因,但是对于较大视图,则2em小于4vw是这就是毛刺效果的原因。
.navbar-menu ul li{ display: block; font-size: 4vw; margin-top: 5%; transition:all 0.3s; } .navbar-menu ul li:hover{ color: #fff; transform: translateX(3%); background-color: #888888; font-size: 5vw; }
<nav class="navbar-menu"> <ul id="list" class="test"> <li id="emph nav-home">Home</li> <li id="nav-portfolio">Portfolie</li> <li id="nav-skills">Færdigheder</li> <li id="nav-erfaring">Erfaring</li> <li id="nav-kontakt">Kontakt mig</li> </ul> </nav>
If you want to double the size of font when hover, you should use 'em' unit for both initial and hover states. 如果要在悬停时将字体大小加倍,则应将“ em”单位用于初始状态和悬停状态。
The following code will work: 以下代码将起作用:
.navbar-menu ul li{
display: block;
font-size: 3em;
margin-top: 5%;}
.navbar-menu ul li:hover{
color: #fff;
transform: translateX(3%);
background-color: #888888;
transition-duration: 0.3s;
font-size: 4em;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.