Question

我绝对没有把自己称为编码员，这就是为什么我需要一些帮助。我试过＆amp;试图获得一个形状网格，文字覆盖，只要鼠标悬停在不同的文本上，就会变成不同的文字 - 完全不同的文字。我抬头看了之前＆amp;在属性之后，但由于＆＃34;网格＆＃34;仍然无法正常运行CSS。

我希望得到＆＃34; name＆＃34;在正常形状上，然后在悬停形状上的其他文字以获取更多信息。我该怎么做呢？我提供了一个小提琴来展示一切。

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

也许是这样？

spring.mail.port=465
spring.mail.host=smtp.gmail.com
spring.mail.username=xx@gmail.com
spring.mail.password=yyyyy
spring.mail.protocol=smtp
spring.mail.defaultEncoding=UTF-8

spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.auth = true
spring.mail.properties.mail.smtp.socketFactory.port = 465
spring.mail.properties.mail.smtp.socketFactory.class = javax.net.ssl.SSLSocketFactory
spring.mail.properties.mail.smtp.socketFactory.fallback = false
spring.mail.properties.mail.smtp.ssl.enable=false

support.mail.address=xx@gmail.com

html_str='<a onclick="return:false;" href="https://example.com/file-X.Y.Z.zip"><div class="btn">Linux</div></a>'

xmlstarlet sel -t -v '//a/@href' -n <<< "$html_str"
https://example.com/file-X.Y.Z.zip

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/

Shape to Diff上的文字。悬停时的文字

3 个答案: