0

我想实现具有鼠标悬停效果的小圆圈（触摸点）（鼠标悬停时圆圈会变大并包含几行文本） - 请参阅 jsfiddle http://jsfiddle.net/eRDy6/1/

我试图改编一些在网上找到的代码，但努力做两件事：

  1. 我无法将“阅读”一词居中（垂直和水平）到圆圈的中间。我怎么能做到这一点。

  2. 我想在大圆圈中显示不同的文本。最好的方法是什么？

非常感谢您的帮助

<div class="middle clear">
<div id="touchPointContainer">
            <div id="touchPoint1" class="touchPoint">
                <p>read</p>
            </div>
            <div id="touchPoint2" class="touchPoint">
                <p>read</p>
            </div>
            <div id="touchPoint3" class="touchPoint">
                <p>read</p>
            </div>
        </div>

</div><!-- End DIV Middle clear -->

CSS：

.middle {
    display: block;
    clear: both;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    background: red;
    box-shadow: 0px 0px 10px 2px #e0e0e0;
    -webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
    -moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
}

#touchPointContainer {
  height: 600px;
    background: green;
  position: relative;
}
.touchPoint {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  text-align: center;
  color: #5bb6e7;
  font-size: 12px;
  -webkit-transition: width .2s, height .2s, margin .2s;
  -moz-transition: width .2s, height .2s, margin .2s;
  -o-transition: width .2s, height .2s, margin .2s;
  -ms-transition: width .2s, height .2s, margin .2s;
  transition: width .2s, height .2s, margin .2s;
}

.touchPoint:hover {
  height: 160px;
  width: 160px;
  margin: -40px 0px 0px -40px;
  -webkit-transition: width .2s, height .2s, margin .2s;
  -moz-transition: width .2s, height .2s, margin .2s;
  -o-transition: width .2s, height .2s, margin .2s;
  -ms-transition: width .2s, height .2s, margin .2s;
  transition: width .2s, height .2s, margin .2s;
}
#touchPoint1 {
  top: 260px;
  left: 140px;
}
#touchPoint2 {
  top: 240px;
  left: 360px;
}
#touchPoint3 {
  top: 180px;
  left: 720px;
}
4

1 回答 1

2
  1. 要使文本垂直居中，我们需要设置display: table-cell元素display: table及其容器。
  2. 要在悬停时切换内容，您可以制作一个隐藏的文本元素并在容器悬停时显示它（并隐藏第一个）。

所以要做你想做的，添加这些类：

.touchPoint {
    display: table;
}
.touchPoint p {
    vertical-align: middle;
    display: table-cell;
}
.touchPoint .final,
.touchPoint:hover .initial {
    display: none;
}
.touchPoint .initial,
.touchPoint:hover .final {
    display: table-cell;
}

jsFiddle 演示

于 2013-09-14T14:09:51.873 回答