0

onmouse over エフェクトを使用して小さな円（タッチポイント）を実装したいと思います（円はマウスオーバーで大きくなり、数行のテキストが含まれます）-jsfiddle http://jsfiddle.net/eRDy6/1/を参照してください

Web で見つかったいくつかのコードを適応させようとしましたが、2 つのことを行うのに苦労しています。

  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 に答える