6

Firefox（現在のバージョン14.0.1）では、ここ（http://mediabrands.com.au/）で<area>作成したいくつかのタグの周りに点線の輪郭が表示されます。点線が表示されるだけでなく、一度表示されると、それを取り除くことはできません（たとえば、別の領域をクリックすることによって）。

ここに画像の説明を入力してください

私はかなりの時間この辺りとグーグルを検索しました、そしてそれでもそれらを取り除くことができませんでした。他のブラウザには表示されません。

私が試したもの（および以下のすべての組み合わせ）は成功しませんでした：

  • outline: noneimg、map、areaタグ（およびそれら:focusと:active）に対応するものを追加します。
  • それらのそれぞれに追加border: noneされました。
  • それらのそれぞれに追加hidefocus="hidefocus"されました。
  • ::-moz-focus-inner{ border: none; outline: none; }これらの各要素にを使用してさまざまな組み合わせを追加しました。
  • .focus(function(){ $(this).blur(); })それらのそれぞれに（jQuery）を追加しました。

私は私が出くわしたすべての情報を使い果たしたと信じています-これらの線を取り除く他の方法はありますか？

クイックリファレンス用のHTMLと、それを取り除くことができない理由がある可能性があるためのHTMLを次に示します。

<img src="anatomy/dial/components/foundation.png" id="dial-map" usemap="#dial" />
<map name="dial">
    <area title="Ansible" class="tab" id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#">
    <area title="Cadreon" class="tab" id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#">
    <area title="Orion" class="tab" id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#">
    <area title="Ensemble" class="tab" id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#">
    <area title="Reprise" class="tab" id="click-reprise" shape="poly" coords="73,69,111,39,176,8,242,2,243,53,172,66,112,108" href="#">
    <area title="Magna Global" class="tab" id="click-magnaglobal" shape="poly" coords="245,487,186,481,114,450,71,417,110,377,175,423,246,432" href="#">
    <area title="Airborne" class="tab" id="click-airborne" shape="poly" coords="69,414,37,373,12,316,2,244,55,244,68,322,106,375" href="#">
    <area title="Marketing Sciences" class="tab" id="click-analytics" shape="poly" coords="2,242,11,171,33,120,71,74,109,109,70,168,54,241" href="#">
    <area title="MB3" class="tab" id="click-mb3" shape="poly" coords="257,430,178,422,120,384,82,340,140,305,163,337,206,360,262,364,317,342,348,305,404,340,384,367,324,413" href="#">
    <area title="UM" class="tab" id="click-um" shape="poly" coords="307,134,245,116,246,56,309,68,375,109,418,178,430,237,429,288,404,339,350,303,368,246,358,198,344,169" href="#">
    <area title="Initiative" class="tab" id="click-initiative" shape="poly" coords="80,339,63,289,58,235,72,171,109,112,176,67,243,56,242,119,192,128,152,159,126,206,122,261,137,306" href="#">
    <area title="View Website" id="website" shape="poly" coords="173,330,139,292,133,213,161,167,196,143,245,129,305,146,336,176,359,246,339,300,309,335,260,352,209,351" href="#">
</map>
4

4 に答える 4

7

問題は、dial.jsの151行目のぼかしフォーカス機能です。削除すると問題が解決します。

$("img, area, map").focus(function(event) {
    $(this).blur();
});

エリア要素に焦点を合わせないようにするには、atabindexを-1に設定します。

<area tabindex="-1" title="Ansible" class="tab" id="click-ansible" shape="poly" coords="...

デモ： http： //jsfiddle.net/SO_AMK/K8Adx/

于 2012-10-15T01:53:47.617 に答える
3

焦点がぼやけていることが問題を引き起こしているようです。

Dial.jsから削除します。

// Prevent focus of areas.
$("img, area, map").focus(function() {
    $(this).blur();
});

これが私がすべてを単純化するために作ったフィドルです：http：//jsfiddle.net/MadLittleMods/gDrAS/ javascriptにコメントを付け、コメントを外して、さまざまな結果を確認します。

ぼかしとフォーカスの解決策は、を使用することevent.preventDefault()です。したがって、上記で削除されたものを次のように置き換えることができます。

// Prevent focus of areas.
$("img, area, map").focus(function(e) {
    e.preventDefault();
});

属性tabindexを使用した修正もあります。tabindex="-1"

于 2012-10-15T01:42:28.137 に答える
0

次のように、エリアフォーカスとアクティブ状態を境界線0に設定してみてください。

次の質問によると：InternetExplorer9の画像マップの周りの青い境界線

a,
img {
  outline: none;
}
map > area,
map > area:active,
map > area:focus {
  outline: none;
  border: 0;
}
于 2012-10-14T23:21:42.123 に答える
-2

CSSを使用してみてください：text-decoration:none;

于 2012-10-14T22:54:53.963 に答える