Question

我有一个div，我想在悬停后获得background-color缩放的div，所以我做了以下内容：

li { 
  background-size:  0 0;
  transition: background-size 2s ease-in;
  -moz-transition: background-size 2s ease-in;
  -web-kit-transition: background-size 2s ease-in
}
li:hover {
  background-size:  100% 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

我希望在此网站上悬停的工具栏按钮获得类似的效果：http://www.materialup.com/posts/material-admin

Answer 1

您需要通过css添加:before元素才能获得所需的结果。

<强> demo

li {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 5px;
  background: white;
}

li:before {
  content: " ";
  transition: all 255ms ease-in;
  -moz-transition: all 255ms ease-in;
  -webkit-transition: all 255ms ease-in;
  transform: scale3d(0, 0, 0);
  -webkit-transform: scale3d(0, 0, 0);
  width: 40px;
  height: 40px;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

li:hover:before {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

Answer 2

我不确定你指的是哪个工具栏按钮，但如果我正确理解你的问题，你想要在listitem周围包含背景颜色。

添加display: inline-table;通常可以完成工作。

以下是您的示例代码的小提琴：https://jsfiddle.net/5v5upekt/5/

Source

Answer 3

示例HTML

<div class="container">
  <h3>Inline List</h3>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

CSS将是

.container{
      margin:auto;
      background-color:white;
      width:80%;
}


li:hover{
   -webkit-transform:scale(1.1);
   transform:scale(1.1);
   opacity: 0.8;
   background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0%;
   cursor:pointer;
   }

li{
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    cursor:pointer;
}

您可以找到一些悬停和动画效果here

以下是Demo

请告诉我这是您的要求。

Css：缩放div的背景颜色

3 个答案: