解释网站的悬停示例

Question

我正在学习网络开发，我正在尝试复制另一个网站的布局来训练我的技能，但是在这个网站上有一点我做不到=/

<div class="a">
<span>Teste</span>
<i>Teste Two</i>
</div>

html {
color:#fff;
}

.a {
width:200px;
height:200px;
background:#000;
text-align:center;
font-size:36px;
spanopacity:1;
transform:scale(1);
}

i {
top:50%;
left:50%;
position:absolute;
z-index:2;
}

我试过 this 但它不能正常工作。

在此 website 中，该部分包含带有 "Get Involved" 的框和一些悬停时会发生变化的图标。

我不明白这是如何使用伪元素 ::after 和 ::before

Answer 1

这个linkhttp://codepen.io/anon/pen/JGRGBd

悬停有效，但当 css 检测到鼠标悬停在标签上时，您还没有进行任何更改

改变

.a:hover{
}

到

.a:hover{
  background:green;
}

你会看到区别的

编辑伪元素的基础知识，请参见此处

http://www.w3schools.com/css/css_pseudo_elements.asp

Answer 2

第二个 link 使用第二个文本上的 transition CSS 项目执行此操作：

-webkit-transition: -webkit-transform 0.5s ease,opacity 0.5s ease; 
-moz-transition: -moz-transform 0.5s ease,opacity 0.5s ease;
-ms-transition: transform 0.5s ease,opacity 0.5s ease;
transition: transform 0.5s ease,opacity 0.5s ease;

变换告诉浏览器在 0.5 秒内变换文本，然后在 o.5 秒内将不透明度变换为：

opacity: 1;

在第一个元素上，有一个类似的：

opacity: 0;

这会使第一个元素不可见，同时使第二个元素可见并变小。

Answer 3

Here is the code which you have written. I just did little bit of editing here.

html{
  color:#000;
}
.a{
  width:200px;
  height:200px;
  background:#000;
  text-align:center;
  font-size:36px;
  overflow:hidden;
  cursor:pointer;
}
.b{
  width:200px;
  height:200px;  background:url('http://cdn.bigbangfish.com/quotes/nature-quotes-tumblr/nature-quotes-tumblr-8.jpg');
  background-size:cover;
  text-align:center;
  font-size:36px;
  margin:0 auto;
  transform: rotateZ(0) scale(1);
  transition: all 0.3s ease-in-out;
}
.icon{
  background-image:url('http://lifeandscience.org/keepers/files/2011/02/combo_plus_sign2.png');
  background-size:container;
  background-position:center;
  background-repeat:no-repeat;
  background-color: rgba(255, 255, 255, 0.29);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
  opacity:0;
  transition: all 0.3s ease-in-out;
}
.a:hover .b,
.a:hover .icon{
-webkit-transform: rotateZ(-3deg) scale(1.2);
transform: rotateZ(-3deg) scale(1.2);
   opacity:1;
}

<div class="a">
  <div class="b">
    <span>EIQ</span>
    <i>SEHLOIRO</i>
    <div class="icon">
    </div>
  </div>
</div>

Here is the link for CodePen Click here

Answer 4

.a:hover
{
background-color:#f00;
transition: background-color 0.35s ease-out 0.1s;
}

解释网站的悬停示例

Explain a hover example of a website

html

css

hover