Question

我在网页上有一个填充了块文本的区域，并希望鼠标悬停在同一个地方，相同的字体大小等上有另一个块文本，只是一个不同的消息。有没有可能使用CSS / HTML实现这种效果？我知道这可以使用图像，但我有兴趣对字体类型进行更多控制并获得更好的显示质量。

LE：根据Paulie_D的下面回答和下面提到的Reece George代码，我试图包装一个这样的短代码：

<div class="parent">
<h1 id="h1">[slabtext]
[slab]Fit text[/slab]
[slab]Typography[/slab]
[slab]Made easy[/slab]
[slab]use a WordPress shortcode[/slab]
[/slabtext]</h1>
<div class="child">
<h1 id="h1">[slabtext]
[slab]hover two[/slab]
[slab]Typography[/slab]
[slab]Made easy[/slab]
[slab]look mom no hands[/slab]
[/slabtext]</h1>
</div>
</div>

的CSS：

h1
            {
            text-align:left;
            font-family:'LeagueGothicRegular', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
            text-transform: uppercase;
            line-height:1;
            color:#222;
            font-size:300%;
            /* Remember to set the correct font weight if using fontface */
            font-weight:normal;
            }
        /* Smaller font-size for the side-by-side demo */
        .col-1 h1,
        .col-2 h1
            {
            font-size: 32px;
            }


* {
  margin: 0;
  padding: 0;
}
.parent {
  border: 1px solid grey;
  width: 100%;
  margin: 25px auto;
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: none;
}
.parent:hover .child {
  display: block;
}
p {
  padding: 1em;
}

结果非常奇怪，不太确定如何在儿童悬停上也能获得相同的效果（slabtext适合窗口）。结果：

hover 1

hover 2

有什么想法吗？

Answer 1

以下是使用CSS / HTML的解决方案：

#block .hover {
  display: none;
}

#block:hover .hover {
  display: inline;
}

#block:hover .no-hover {
  display: none;
}

<div id="block">
  <span class="no-hover">
    Initial text
  </span>
  <span class="hover">
    Text with mouseover
  </span>
</div>

Answer 2

如果您希望包含div保持相同的大小，则存在一些限制。

第二个文本块必须比第一个文本块短。

此方法类似于Tim Osadchiy的方法，但子div被定位为覆盖父级（这需要背景颜色来隐藏基础文本。）

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.parent {
  border: 1px solid grey;
  width: 80%;
  margin: 25px auto;
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: none;
}
.parent:hover .child {
  display: block;
}
p {
  padding: 1em;
}

＆＃13;

<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quod numquam illum perferendis deserunt vel quia voluptas dolorem animi dignissimos quisquam sint reiciendis soluta impedit voluptates ipsam iste? Iure alias dolore doloremque eum totam
    perspiciatis commodi illo porro consequatur placeat et aspernatur rerum omnis harum in odit nam cumque ducimus!</p>
  <div class="child">
    <p>Iure alias dolore doloremque eum totam perspiciatis commodi illo porro consequatur placeat et aspernatur rerum omnis harum in odit nam cumque ducimus!</p>
  </div>
</div>

＆＃13;

Answer 3

一种不同的方法。

.message {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-family: sans-serif;
}
.message::before {
  content: 'Get Messages';
  width: inherit;
  height: inherit;
  position: absolute;
  background: darkorange;
}
.message:hover::before {
  content: 'New Message!';
  background: darkorange;
}

<div class='message'>Message</div>

文本鼠标悬停短代码换行的css / html文本

3 个答案: