文字形状为差异。悬停时的文本

Question

我从来没有将自己确定为编码器，这就是为什么我需要一些帮助。我试过&试图获得一个网格形状与文本覆盖改变为不同的文字，只要鼠标悬停在它上面 - 完全不同的文本。我在查找属性后查找&，但仍然因为“网格”CSS而无法正确显示。

我希望在正常形状上有“名称”，然后在悬停形状上有其他文字以获取更多信息。我会如何去做这件事？我提供了一个小提琴来展示一切。

http://jsfiddle.net/6c4v2ypv/3/

谢谢大家极大的帮助。

CSS

.grid { 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
    background: #fff; 
} 

.grid::after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

.grid-item { 
    width: 21.833%; 
    padding-bottom: 21.833%; 
    overflow: hidden; 
    float: left; 
    background: #BBB; 
    transform: rotate(45deg); 
    margin: 5.5%; 
    margin-top: -11%; 
} 

.grid-item:nth-child(1), 
.grid-item:nth-child(2), 
.grid-item:nth-child(3) { 
    margin-top: 5%; 
} 

.grid-item:nth-child(5n+4) { 
    margin-left: 21.9%; 
} 

.grid-item:nth-child(5n+6) { 
    clear: left; 
} 

.grid-item:nth-child(5n+6):last-of-type { 
    margin-left: 38.25%; 
} 

.grid-item:hover { 
    background: #000; 
} 

.grid-inner { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transform: rotate(-45deg); 
    text-align: center; 
    padding-top: 40%; 
    font-size: 1em; 
} 

.grid-inner:hover a span { 
    display: none; 
} 

.grid-inner:hover:after { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transform: rotate(-45deg); 
    text-align: center; 
    padding-top: 40%; 
    font-size: 1em; 
    background-color: black; 
} 

Answer 1

也许是这样？

.grid { 
 
    width: 100%; 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 

 
.grid::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.grid-item { 
 
    width: 21.833%; 
 
    padding-bottom: 21.833%; 
 
    overflow: hidden; 
 
    float: left; 
 
    background: #BBB; 
 
    transform: rotate(45deg); 
 
    margin: 5.5%; 
 
    margin-top: -11%; 
 
} 
 

 
.grid-item:nth-child(1), 
 
.grid-item:nth-child(2), 
 
.grid-item:nth-child(3) { 
 
    margin-top: 5%; 
 
} 
 

 
.grid-item:nth-child(5n+4) { 
 
    margin-left: 21.9%; 
 
} 
 

 
.grid-item:nth-child(5n+6) { 
 
    clear: left; 
 
} 
 

 
.grid-item:nth-child(5n+6):last-of-type { 
 
    margin-left: 38.25%; 
 
} 
 

 
.grid-item:hover { 
 
    background: #000; 
 
} 
 

 
.grid-inner { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(-45deg); 
 
    text-align: center; 
 
    padding-top: 40%; 
 
    font-size: 1em; 
 
} 
 

 
.grid-inner:hover a span { 
 
    display: none; 
 
} 
 

 
.grid-inner:hover:after { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(-45deg); 
 
    text-align: center; 
 
    padding-top: 40%; 
 
    font-size: 1em; 
 
    background-color: black; 
 
} 
 

 
.grid-inner-hover { 
 
    opacity: 0; 
 
} 
 

 
.grid-item:hover .grid-inner-hover { 
 
    opacity: 1; 
 
    color: #fff; 
 
}

<div class="grid"> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 1</div> 
 
    <div class="grid-inner grid-inner-hover">Name 1 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 2</div> 
 
    <div class="grid-inner grid-inner-hover">Name 2 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 3</div> 
 
    <div class="grid-inner grid-inner-hover">Name 3 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 4</div> 
 
    <div class="grid-inner grid-inner-hover">Name 4 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 5</div> 
 
    <div class="grid-inner grid-inner-hover">Name 5 Hover</div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-inner">Name 6</div> 
 
    <div class="grid-inner grid-inner-hover">Name 6 Hover</div> 
 
    </div> 
 
</div>

Answer 2

这里有一个简单的例子：

.item1:hover span, .item2:hover span{ 
 
    display: none; 
 
} 
 
.item1:hover:after{ 
 
    content: 'ADD'; 
 
} 
 

 
.item2:hover:after{ 
 
    content: 'Subtract'; 
 
}

<div class="item1">  
 
     <span >first</span> 
 
</div> 
 

 
<div class="item2">  
 
     <span>second</span> 
 
</div>

Answer 3

你也可以在你的CSS添加如下内容：

.grid-inner:hover:after{ 
    content:'hello'; 
    color:#fff; 
    transform:rotate(0deg); 
} 

http://jsfiddle.net/6c4v2ypv/5/