使用css悬停时文本更改答案

【问题标题】：text change while hovering using css使用css悬停时文本更改
【发布时间】：2020-12-15 08:06:12
【问题描述】：

我使用的 CSS 是正确的，但如果我再使用两次。同时更改文本。我要一一盘旋。这个我试过了。

.hexo {
  height: 70px;
  width: 250px;
  margin-left: 40px;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  position: relative;
  text-align: center;
  color: #f6922d;
  line-height: 70px;
  font-size: 20px;
  font-family: sans-serif;
}

.hexo:before,
.hexo:after {
  content: '';
  position: absolute;
  top: 13px;
  height: 40px;
  width: 40px;
  border: 4px solid #000;
  -webkit-transform: scale(0.8, 1.25) rotate(45deg);
  -moz-transform: scale(0.8, 1.25) rotate(45deg);
  -ms-transform: scale(0.8, 1.25) rotate(45deg);
  transform: scale(0.8, 1.25) rotate(45deg);
}

.hexo:before {
  left: -22px;
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
}

.hexo:after {
  right: -22px;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
}

div .comment {
  display: none;
}

div:hover .hexo {
  display: none;
}

div:hover .comment {
  display: inline;
}

.comment {
  font-size: 15px;
  text-align: center;
}

<div>
  <div>
    <div class="hexo">Application Development</div>
    <div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform</div>
  </div>
  <div>
    <div class="hexo">Application Development</div>
    <div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform
    </div>
  </div>

这个东西我试过了，请帮帮我。如何在鼠标悬停时一一更改文字

【问题讨论】：

你想归档什么？
我需要用文字创建更多的六边形。在形状上移动时。内容应该出现。当鼠标悬停在一个上时。应该换一个。但在这里。将鼠标悬停在文本上，所有这些都发生了变化。
将鼠标悬停在主题上时，会出现几行关于该主题的信息。

标签： html css hover mousehover

【解决方案1】：

效果会被触发，因为您将鼠标悬停在根 div 上，因此它会应用于所有底层 hexo 和 comment 元素。

您需要确保您的样式仅适用于子节点，而不适用于所有后代：

div:hover > .hexo {
  display: none;
}

div:hover > .comment {
  display: inline;
}

完成sn-p：

.hexo {
  height: 70px;
  width: 250px;
  margin-left: 40px;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  position: relative;
  text-align: center;
  color: #f6922d;
  line-height: 70px;
  font-size: 20px;
  font-family: sans-serif;
}

.hexo:before,
.hexo:after {
  content: '';
  position: absolute;
  top: 13px;
  height: 40px;
  width: 40px;
  border: 4px solid #000;
  -webkit-transform: scale(0.8, 1.25) rotate(45deg);
  -moz-transform: scale(0.8, 1.25) rotate(45deg);
  -ms-transform: scale(0.8, 1.25) rotate(45deg);
  transform: scale(0.8, 1.25) rotate(45deg);
}

.hexo:before {
  left: -22px;
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
}

.hexo:after {
  right: -22px;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
}

div .comment {
  display: none;
}

div:hover > .hexo {
  display: none;
}

div:hover > .comment {
  display: inline;
}

.comment {
  font-size: 15px;
  text-align: center;
}

<div>
  <div>
    <div class="hexo">Application Development</div>
    <div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform</div>
  </div>
  <div>
    <div class="hexo">Application Development</div>
    <div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform
    </div>
  </div>:

【讨论】：

它正在工作，谢谢@robby Cornelissen