Question

我是CSS的新手，只知道非常基本的东西。我在interwebs上找到了这个代码，它可以创建一个按钮，但我会在按钮内部使用一个图像，当我悬停时我会在图像上面有一个颜色并想要显示文本，我该如何让它说出来了解更多信息一旦它徘徊？还有一件事。如何在悬停时改变颜色？有没有办法用html颜色代码而不是rgba来改变它？我不知道如何使用rgba并希望颜色更改为＃f58020谢谢，并希望这是有道理的

.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover {
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}

Answer 1

请观看此链接DEMO

<强> HTML

<button class="circle" ><span>new</span></button>

<强> CSS

span{
    display: none;
}
.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
.circle:hover span{
  display: block;
}

Answer 2

您不需要添加非语义html元素。将这些样式添加到代码中以获取隐藏文本：

.circle {color: transparent}
.circle:hover {color: white}

<a class="circle">Learn<br>More</a>

然后，在.circle中添加填充顶部，减小高度并更改行高：

.circle {height: 65px; padding-top: 35px; font:bold 16px/100% Arial, sans-serif;}

参见示例：jsfiddle

在你的css参考中你有：

.circle {font:bold 16px/100px Arial, sans-serif;}

100px是指行高，100px是很多。我建议你在这种情况下使用100％的百分比＆lt; br＆gt;用于强制换行。如果需要，您可以删除，但是您必须添加更多填充顶部，并降低高度。

Answer 3

使用

MARK UP

<div class="circle"><span>Learn</span></div>

或

<button class="circle"><span>Learn</span></button>

<强> CSS

span{
  display: none;

}
.circle:hover span{

    display:block;
}

FIDDLE DEMO

Answer 4

您可以使用悬停属性在

之前或之后显示内容

<!DOCTYPE html>
<html>
<head>
<style>
p:before 
{
content:"Read this -";
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<b>Note:</b> For the content property to work in IE8, a DOCTYPE must be declared.

</body>
</html>

Answer 5

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

</style>
</head>
<body>



<p><a class="hovertext" href="#" title="LEARN MORE"><img id="a" src="buttonImage.png" width="500" height="309" border="0" alt=""></a></p>

</body>
</html>

当我将鼠标悬停在按钮上时如何添加文字

5 个答案: