Question

我想用一个onmouse over效果来实现小圆圈（触摸点）（圆圈会在鼠标上变大，并包含几行文字） - 请参阅jsfiddle http://jsfiddle.net/eRDy6/1/

我试图调整在网络上找到的一些代码，但却在努力做两件事：

我无法将“读取”这个词居中（垂直和水平）到圆圈的中间。我怎么能做到这一点。
我希望在大圆圈中显示不同的文字。最好的方法是什么？

非常感谢你的帮助

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

Answer 1

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

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

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

鼠标悬停时的接触点 - 2个问题

1 个答案: