Question

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

我到目前为止的HTML是：

＆＃13;

<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>

＆＃13;

使用以下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

您想要达到的效果是：

文本
边界

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

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

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

正如box-transition部分已经存在转换css的效果一样，它们将顺利运行。

Answer 3

你使用了这么多课程。不需要这么多课程。

取

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

1.class one在鼠标悬停在第一个div之前。

当第一类可见时，写第二类的风格是

two{ display:none; }
将鼠标移到课堂上＆＃39;写css就像

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

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

这里是示例JSFIDDLE

Answer 4

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

1）创建一个wrapper div来保存此框。 2）创建2个div，每个div保存鼠标悬停前后应显示的内容。 3）制作这两个孩子div position:absolute 4）将z-index设置为第一个孩子，使其与第二个孩子重叠。所以你现在只能看到一个div 5）在第一个孩子的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>

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

4 个答案: