18

テキストリンクがあります。ユーザーがテキスト リンクにカーソルを合わせると、ページの別の場所に画像が表示されるようにします。cssを使ってやりたい。onmouseover のように、リンク内の 1 行のコードで簡単に実行できると思っていましたが、ページの他の場所に別のコードが必要なようです。

背景画像として表示したい画像で a:hover を使用してみましたが、テキスト リンクのサイズに切り詰めるのではなく、完全に表示するように操作することはできないと思います。

これを検索しようとすると何百もの結果が表示されますが、どれも私が望むものではありません。私が見つけた最も近いものはこれでした。

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

しかし、それはサムネイル画像にカーソルを合わせるとうまくいきます。ユーザーが単一のテキストリンクにカーソルを合わせて、ページの別の場所に画像を表示させたいだけです。このスレッドからそのギャラリーを見つけました:ホバー時に画像 css リンクをポップアップする

私はcssに慣れているので、jqueryが何であれ、あまりにも多くのスクリプトを扱いたくありません。これを行う簡単な方法を知っている人はいますか、それとも css3 にすべての変更が加えられていなくても、まだ方法はありませんか?

ありがとう！

4

6 に答える 6

24

CSS はそのような他の要素を呼び出すことはできません。JavaScript を使用して、子セレクターまたは兄弟セレクターを超えて到達する必要があります。

次のようなことを試すことができます：

<a>Some Link
<div><img src="/you/image" /></div>
</a>

それから...

a>div { display: none; }
a:hover>div { display: block; }
于 2012-05-26T19:15:27.107 に答える
1

追加

.hover_img a:hover span {
    display: block;
    width: 350px;
}

テーブルにホバー画像をフルサイズで表示するには、350 を自分のサイズに変更します。

于 2016-05-04T21:28:58.040 に答える
1

w3 学校から:

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <img src="/pathtoimage" class="tooltiptext">
</div>

あなたが欲しいものについてのように聞こえます

于 2019-03-05T05:46:16.897 に答える
-6

CSSだけでこれを行うことはできません。Javascriptを使用する必要があります。

<img src="default_image.jpg" id="image" width="100" height="100" alt="" />


<a href="page.html" onmouseover="document.images['image'].src='mouseover.jpg';" onmouseout="document.images['image'].src='default_image.jpg';"/>Text</a>
于 2012-05-26T19:21:56.250 に答える