4

ウェブサイトの上部に電話番号のリンクがあります。番号は1300GOPOOPIESです。（例：P）

<h1 class="phone-text">
<a href="tel:+6113007667437">1300 GO POOPIES</a>
</h1>

つまり、基本的に、人が1300 GO POOPIESの上にマウスを置くと、1300467667437に変わります。

ただし、Click-to-Call機能を維持したいので、画像は使用しません。

私はCSSで何かをしようとしましたが、成功は最小限でした。

.phone-text::after {
  content: "1300 GO POOPIES";
}

.phone-text:hover:after {
  content: "1300 76 67437";
}

これがcssの境界外であり、Javaが必要かどうかわからない...

4

6 に答える 6

3

jQueryやJSをロードする必要さえありません。CSS+HTMLのみ。 フィドル

于 2012-05-12T06:41:34.657 に答える
1

もう少し深くしたいのですが…ここに行きます。

HTML

<a href="tel:+6113007667437">
  <div id="hide">
    <h1>1300 76 67437</h1>
  </div>
  <div>
    <h1>1300 GO POOPIES</h1>
  </div>
</a>

そしてあなたのCSS

div{
 position:absolute;
 background:#ffffff;
}
div#hide:hover{
 display:none;
}
于 2012-05-12T06:28:51.440 に答える
1

JavaScript を避ける理由がある場合、追加のマークアップを追加する意思がある場合は、CSS だけでこれを実現できます。これを行うには、タグ内に 2 つの要素<a>(1 つは数字、もう 1 つは英数字) を配置します。a:hover次に、セレクターを使用して個別に非表示/表示できます。

HTML

<h1 class="phone-text">
  <a href="tel:+6113007667437">
    <span class="letters">1300 GO POOPIES</span>
    <span class="digits">1300 76 67437</span>
  </a>
</h1>​

CSS

.phone-text a .digits,
.phone-text a:hover .letters {
  display: none;
}

.phone-text a .letters,
.phone-text a:hover .digits {
  display: inline;
}

jsフィドル

于 2012-05-12T06:24:44.490 に答える
0

ここでは、yaponyalによって提案されたソリューションのバリエーションがあります。>記号なしで機能します。

.hiden {
display:none;
}
a:hover .shown {
display:none;
}
a:hover .hiden {
display:inline;
}

』

于 2012-05-12T08:52:04.713 に答える
0

これを試して：

$('a').hover(
  function(){
    $(this).text('1300 76 67437')
  },
  function(){
    $(this).text('1300 GO POOPIES')
  }
});
于 2012-05-12T06:16:20.457 に答える
0

これはどうですかhttp://jsfiddle.net/tzerb/S52bz/ < a class="phone-text" href="tel:+6113007667437" ></a >

于 2012-05-12T06:19:48.253 に答える