形状上的文本以区分。悬停时的文本

Posted 2023-03-06

【中文标题】形状上的文本以区分。悬停时的文本

【英文标题】：Text on Shape to Diff. Text upon Hover

【发布时间】：2018-02-12 00:59:41

【问题描述】：

我绝对从未将自己定义为编码员，这就是我需要帮助的原因。我已经尝试过并试图获得一个带有文本的形状网格，以便在鼠标悬停在它上面时更改为不同的文本 - 完全不同的文本。我在属性之前和之后查找，但由于“网格”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;

【参考方案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>

【参考方案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>

【讨论】：

感谢 DCR，我之前在寻找答案时看到了该示例，但它似乎不起作用。我试图在悬停时为每个形状添加多个“新”文本。我是否需要更改 "div class='item' 以容纳 "grid-item" ？也不确定 grid-item VS grid-inner

【参考方案3】：

你也可以在你的css中添加这样的东西：

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

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