文字形狀爲差異。懸停時的文本

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/