使用CSS将光标悬停在光标上时如何使按钮显得更大？

Question

当光标悬停在

上时，我想让这些按钮变大

node-gulp

Answer 1

一个简单的例子是：

使用font-size: 20px;或font-size: 2em;

li:hover {
  background-color: green;
  font-size: 20px;
}

<div>

    <li>button1</li>
    <li>button2</li>
    <li>button3</li>

</div>

更好的方法是：

transform: scale(1.25) perspective(1px)

li {
  margin-left: 50px;
  height: 20px;
  width: 100px;
  background: lightgray;
  border: 1px solid black;
  list-style: none;
  text-align: center;
}

li:hover {
  background-color: green;
  transform: scale(1.25) perspective(1px)
}

<div>
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
</div>

Answer 2

对于列表，最好将其放在ul元素（无序列表）或ol元素（有序列表）中。

在CSS中选择列表元素，然后选择:hover

所以这样：

li:hover { font-size: 2em; }

＆安培;瞧它有效。

但我建议您了解有关CSS和HTML的更多信息。基础知识非常简单＆amp;有趣的学习:)

ul > li {
 list-style: none; 
}

ul > li:hover {
  font-size: 2em;
}

<div>
  <ul>
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
  </ul>
</div>

Answer 3

这可以用cimple CSS来完成，我相信，

CSS：

mydiv:hover {
    width: 40px;
    height: 40px;
}

但你可能需要使用javascript，这是javascript的一个例子：

function onhover1() {
  mydiv=document.getElementById("mydiv")
  setTimeout(function() {mydiv.width="5px"}, 500);
  setTimeout(function() {mydiv.width="10px"}, 500);
  setTimeout(function() {mydiv.width="15px"}, 500);
  setTimeout(function() {mydiv.width="20px"}, 500);
  setTimeout(function() {mydiv.width="25px"}, 500);
  setTimeout(function() {mydiv.width="30px"}, 500);
  setTimeout(function() {mydiv.width="35px"}, 500);
  setTimeout(function() {mydiv.width="40px"}, 500);
}

然后你需要相反的不徘徊
然后按钮就像：

<li id="mydiv" onmouseover="onhover1()" onmouseout="onunhover1()">button|</li>

Answer 4

#container li {
  display: inline-block;
  background-color: #d11b34;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transform: scale(1, 1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1, 1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

#container li:hover {
  -webkit-transform: scale(1.05, 1.07);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1.05, 1.07);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

<div id="container">
  <ul>
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
  </ul>

</div>

Answer 5

<style> 
li: hover {
  font-size: 30px;
}
</style>

<div>

    <li>button1</li>
    <li>button2</li>
    <li>button3</li>

</div>