8

CSS で要素にcursoraを設定する方法はありますか? areaそうではないようです。このコードは何もしていないように見えます。

CSS

area {cursor: help;}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">
<map name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

私が思いついた最高のハックは、その領域の上にリンクを絶対に配置し、カーソル スタイルを与えることです。

4

6 に答える 6

1

画像の上にリンクを絶対に配置することも、私の解決策/ハックです。

非常に重要な画像ではない場合は、画像を背景としてコンテナを作成し、リンクを絶対に配置し、リンク テキストaltを現在使用しているテキストにすることで、かなり意味的にこれを行うことができます。次に、リンクにネガtext-indentを使用してテキストを非表示にします。意図したとおりに動作しますが、CSS が無効になっている場合は、偽のイメージ マップの代わりにプレーン テキスト リンクを表示する必要があります。

于 2012-05-08T17:01:11.643 に答える
1

Webkit ナビゲーター、CSS を使用:

area {cursor: help;} /* or other type */

動作しないので、「href」を使用します。このように無効にできます

<area ... href="javascript:void(0);" />
于 2013-09-10T11:48:47.793 に答える
1

CSS

#blah-map area{
    cursor:default;
}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">

<map id="blah-map" name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

マップに ID を指定し、その ID の領域にカーソル タイプを設定するだけです。

于 2012-12-07T21:13:39.003 に答える
0

toazron1 による回答は、WebKit/Safari で完全に機能し、悪い問題はありません。

CSS

area {
    cursor: help;
    display: block;
}

アイデアは正しく表示することなので、驚くべきことに、属性が設定されていなくても機能します。areadisplay: inlinedisplay: initialhref

于 2014-11-12T02:25:59.857 に答える
0

この課題には答えがありましたが、実験で発見した便利な IE の回避策を共有したいと思います。

問題：ホバー時にカーソルを手/ポインターの状態に変更したくないイメージマップで作業していました。これは、実際のアンカー リンクを必要としないツール ヒント (qTip) の実装用でした。カーソルを矢印 (デフォルト状態) のままにするか、ホバー時に別の状態に変更したかったのです。

スタイルをIEに認識させることができませんでした-ホバー時にカーソルがまだ変更されています:(

ソリューション？最後の試みとして、スタイルを追加しました：

cursor: default;
display: block;

しかし、私はそれらをマップ自体に使用される画像にも関連付けました:

area, img {cursor: default; display: block;}

これが一部の人に役立つことを願っています。

于 2017-01-25T07:55:48.430 に答える