如何在鼠标悬停时将图像和文本更改为文本

Question

我正试图在一个内容框中创建一个效果，其中显示了一个图标和下面的一小段文本。在鼠标悬停时，我希望它只更改为一些文本，但我喜欢边框和文本都更改颜色。到目前为止，我已经设法创建了文本并更改了颜色，但在正确显示图像和更改文本方面遇到了问题。我希望它最终看起来是什么样子的一个很好的例子可以在https://www.upwork.com/在标题下方的网格部分"与最适合您团队的人一起工作"。然而，他们的样式表到处都有参考，所以我正在寻找设置中更简单的东西。它将用于在Wordpress网站上的一小组元素上创建效果。

到目前为止，我拥有的HTML是：

<p>
<a class="box-transition box-size box-color box-padding box-border salesimage" href="http://www.accelerantbsp.com/services/sales-support-administrative-services/">Sales, Support & Administrative Services
</a></p>

使用以下CSS：

.box-transition{
    transition:All .4s ease-in-out;
    -webkit-transition:All .4s ease-in-out;
    -moz-transition:All .4s ease-in-out;
    -o-transition:All .4s ease-in-out;
}
.box-color {
    text-align: center;
    background: #fff;
    color: #000;
    font-family: 'Open Sans';
    text-decoration: none;
}
.box-padding{
    padding: 15px 20px;
}
.box-border{
    border: 2px solid grey;
}
.box-color:hover{
    text-align: center;
    background: #fff;
    color: blue;
    font-family: 'Open Sans';
}
.box-padding:hover{
    padding: 15px 20px;
}
.box-border:hover{
    border: 2px solid blue;
}
.salesimage {
  background-image: url([1]);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: relative;
  background-size: medium;
  -webkit-background-size: medium;
  -moz-background-size: medium;
  -o-background-size: medium; 
}
.salesimage:hover {
  display: hidden;
}

虽然我对任何建议都持开放态度，但我还是在学习HTML5和CSS3的早期阶段，对JavaScript还不太熟悉。

Answer 1

尝试使用a:hover标记怎么样？您不应该在一个标记中有这么多类。了解更多信息，请访问http://www.w3schools.com/cssref/sel_hover.asp

Answer 2

您想要实现的效果是：

• 文本
• 边界

要更改文本，只需在悬停时显示隐藏即可。添加另一个带有附加文本的跨度，并将其悬停显示。但是，显示带有块或九的文本不会产生任何过渡效果。若要创建过渡效果，必须结合不透明度和高度。

当它必须隐藏时，跨度的高度和不透明度将为0；当需要显示时，其高度和不透明度将分别为auto和1。

若要更改边框颜色，可以在开始时设置一些边框颜色，并在悬停时设置新的边框颜色。

由于box-transition部分中已经存在转换css的效果，因此它们将顺利工作。

Answer 3

您使用了很多类。不需要那么多课。

采取

<div class="one">-----
       <div class="two">-----</div>
 </div>

1.第一类是在鼠标悬停在第一个分区上之前。

2. 当第一类可见时，编写第二类的样式为

   two{ display:none; }

3. 在类"one"上鼠标悬停后，编写类似的css

   .one:hover .two{ display:block; position:absolute; }

如果你想要任何内部锚，段落，标题使用自己的风格。

以下是示例JSFIDDLE

Answer 4

这里有一个适合您的解决方案。

1） 创建一个wrapperdiv来容纳此框。2） 创建2个div，每个div保存鼠标悬停前后应该显示的内容。3） 使这两个子div都为position:absolute4） 将z-index设置为第一个子级，使其与第二个子级重叠。所以您现在只能看到一个div5） 在第一个子的hover上移除其z-index，使得第二个子可以与第一个子重叠。

下面的示例演示，根据您的要求更改内容和颜色（您可以添加图标、图像、文本等）

.icon-wrapper {
  width: 200px;
  height: 100px;
  position: absolute;
  cursor: pointer;
}
.first,
.second {
  border: 2px solid;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  text-align:center;
}
.second {
  background-color: green;
}
.first {
  z-index: 10;
  background-color: blue;
}
.first:hover {
  z-index: 0;
}
.second:hover {
  z-index: 10;
}

<div class="icon-wrapper">
  <div class="first">First random stuff goes here</div>
  <div class="second">Second stuff goes here</div>
</div>