今だけ人気マンガ100円レンタル特集♪

jQuery ツールチップの中のリンク

解決済

  • 質問者：mc0816
  • 質問日時：
  • 回答数：1件

ツールチップの中にリンクを置きたいと考えています。

以下HTMLとscriptご参照ください。

テキスト「hoge」をマウスオーバーすると、その下のp.tooltipが表示されるイメージです。

ですが、「hoge」からマウスが離れると、tooltipが消えてしまい、
中のリンクを触ることができません。
（当然ながら…なのですが）

何か良い方法で、ツールチップの中のリンクをクリックする方法はありますでしょうか？
tooltipにマウスがある時はmouseoutイベントが起動しない…みたいな。

そもそも無理なのでしょうか？

詳しい方、ご教授いただけたら大変、助かります。

どうぞ宜しくお願いいたします。


■HTML
<p class="link">hoge</p>
<p class="tooltip">
　ダミーダミーダミー
　<a href="#test">testへ</a>
</p>


■script
$('p.tooltip').hide();
$('p.link').mouseover(function(){
$('+ p.tooltip',this).slideDown();
}).mouseout(function(){
$('+ p.tooltip',this).slideUp();
});

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「ツール イベント」に関するQ&A： イベントログ(Windows)を収集するお勧めのツール（フリー、評価板）を教えて下さい

A 回答 (1件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

どのような文脈やCSSで使う予定なのかが不明ですが、



自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それｒなりに面倒なので、tooltip部分をlinkの子要素になるようにしておいて、mouseenter、mouseleaveで制御するのが簡単ではないでしょうか。

下の例ではmouoseenterなどのかわりにhober()を利用しています。
マークアップを少し変えてありますが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
span.tooltip{ display:block; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …

<script type="text/javascript">
$(function(){
$('.tooltip').hide();
$('p.link').hover( function(){
$('.tooltip',this).slideDown();
}, function(){
$('.tooltip',this).slideUp();
});
});
</script>
</head>
<body>


<p class="link">hoge
<span class="tooltip">
ダミーダミーダミー
<a href="#test">testへ</a>
</span>
</p>

<p class="link">fuga
<span class="tooltip">
ダミー2ダミー2ダミー2
<a href="#test2">test2へ</a>
</span>
</p>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

tooltip部分をlinkの子要素すれば、すごくシンプルにできるんですね。驚きです。
hover()というのを使えば、
要素内にある他の要素上にマウスカーソルが入った場合にも、
マウスはoutにならず、overのままでいてくれるなんて。
勉強になりました。
スクリプトも書いていただき、分かりやすい解説でご親切に教えていただいたことを
大変感謝します。
自分でも実装し、期待通りにできました！
本当にありがとうございました。

通報する
お礼日時：2013/07/03 23:28

このQ&Aに関連する人気のQ&A

「ツール イベント」に関するQ&A： 無線LAN親機の正しい電源オン・オフの仕方は？

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qクリッカブルマップにツールチップを実装したい

<a　class="tooltip"><span>ツールチップ</span></a>
a.tooltip span　{
display: none;
}
a.tooltip:hover span　{
display: block;
}
上記のようにしてcssだけでツールチップを実装しています。

これを応用して、クリッカブルマップにツールチップを実装したいのですが
<map>
<area shape="rect" coords=",,,"/>
</map>
このようにタグが<a>の場合と異なっており、どのように記述すればよいのかわかりません。

やり方を教えてほしいです。
どうぞよろしくお願いします。

Aベストアンサー

area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。

擬似空間の作り方は、透明gifを 乗せる等です。

.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}

<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透明.gif" alt=""><span>aaa</span></a></div>
</div>

また jquery を使うという 方法もあるとおもいます。
その場合はarea でも いけるとおもいます。コード書き換えは発生すると思いますが。

area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。

擬似空間の作り方は、透明gifを 乗せる等です。

.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}

<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透...続きを読む

他の回答も見る

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

他の回答も見る

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数（ボックスの内容）に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数（ボックスの内容）に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

他の回答も見る

Qテーブルタグの中にdivを含めてはダメ？

テーブルタグの中にdiv要素を入れるとダメなのでしょうか？
何か不都合でもあるのでしょうか？
何かご存知の方がいれば教えていただけませんか？

Aベストアンサー

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います）

tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth，tdが書けることになっています（それ以外は不可）。

th，tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

他の回答も見る

Qsyntax error, unexpected '}' というエラーの対処法

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが３３行目前後のどこをなおせばいいのでしょうか？
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
１～１００までの数を入力してください
<input type="text" name="answer" size="5" maxlength="3" />
<input type="sbumit" value=回答" />
</form>
<hr />
<?php
session_start();
if(is_null($_SESSION['answer'])){
mt_stand(microtime()*1000000);
$_SESSION['answer']=mt_rand(1,100);
$_SESSION['game_cnt']=0;
}
if($_POST['answer']!=""){
$_SESSION['game_cnt']++;
if($_session['answer']==$_POST['answer']){
print("おめでとうございます".
$_SESSION['game_cnt']."回で正解しました！");
session_destroy();
}else{
if($_SESSION['answer']>$_POST['answer']){
print("もう少し大きいです。");
}else
print("もう少し小さいです。");
}
}
}
?>
</body>
</html>
それとこの間違えたところをなおしたあとはいつもコンピュータを再起動しないと修正したところが適用されないのですがほかに方法はないですか？基本的な質問ですいません。

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが３３行目前後のどこをなおせばいいのでしょうか？
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
１～１００までの数を入力してください
<input type="text" name="answer" size="5" max...続きを読む

Aベストアンサー

print("もう少し大きいです。");
}else
print("もう少し小さいです。");
のelseの後に｛がないようですが、大丈夫でしょうか？

他の回答も見る

Q 内のテーブルを上寄せにするには？

すみません教えていただけますか？
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか？

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか？
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか？

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

他の回答も見る

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

他の回答も見る

Q「ご連絡いたします」は敬語として正しい？

連絡するのは、自分なのだから、「ご」を付けるのは
おかしいのではないか、と思うのですが。
「ご連絡いたします。」「ご報告します。」
ていうのは正しい敬語なのでしょうか？

Aベストアンサー

「お（ご）～する（いたす）」は、自分側の動作をへりくだる謙譲語です。
「ご連絡致します」も「ご報告致します」も、正しいです。

文法上は参考URLをご覧ください。

参考URL：http://www.nihongokyoshi.co.jp/manbou_data/a5524170.html

他の回答も見る

QCSVファイルの中で、「 , 」カンマを使いたい

「 , 」で区切られたCSVファイルの中で、「 , 」カンマを使いたいのですが、可能でしょうか？

具体的には「これは1,500円でした。」というように、CSVファイルに収められた文章内で出てくる半角の数字（お金）の区切りに使いたいのです。
全角では代用したくないのですが、CSVファイルでデータを受け渡しする際に、困っています。

例えば、特殊文字などで対応可能でしょうか？

Aベストアンサー

受け渡しに使うと言うことは相手方のアプリケーションのことも考えなければいけないのですが・・・とりあえず対応が簡単そうな方法を。

1.各セルを""で囲む。（もちろんデータにダブルクォートがある場合はカンマと同様に困ります。
2.カンマで区切らずにタブで区切る。（比較的使われない文字ですが、やはりデータ中にタブがあるとカンマと同様です）

難しいけれど完璧に対応するためには、データ中の区切り文字は特殊な文字列に変更し、受け取り側のアプリケーションではその特殊な文字列をデータ中の区切り文字として扱うという方法が使われます。
例えば、データ中のカンマは\,にするとか。

データ作成側、受け取り側でそれぞれどこまで対応できるのか分かるともっと簡単かつ具体的な方法を回答できるかも知れません。

他の回答も見る

QTomcatは起動しますが初期index画面が表示できません

Tomcatについての質問は多数寄せられておりますが、
それらを参考にしてインストールなど行いますが、
どうしても後一歩のところで私の場合表示できないという、もどかしい状態になっております。
どうかご存知の方いらっしゃいましたらご教示お願い申し上げます。

Tomcat5.0をWindowsXPで起動しております。
Javaはj2sdk1.4.1_02です。
通常インストールした後Startup.batを起動し、IE6.0で
http://localhost:8080もしくは
http://127.0.0.1:8080と入力、Enterキーを押しますが、画面に
Connection refused
--------------------
Description: Connection refused
と表示されてしまいます。

下記に参考になるかわかりませんが、各種起動状態を記載いたします。アドバイスよろしくお願い申し上げます。

◆コマンドプロンプトで
＞ping localhostと入力すると、
-----
Pinging yamamoto [127.0.0.1] with 32 bytes of data:

Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128

Ping statistics for 127.0.0.1:
Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
Minimum = 0ms, Maximum = 0ms, Average = 0ms
-----

と表示されます。また、
＞telnet localhost 8080の場合は
-----
接続中: localhost...ホストへ接続できませんでした。 ポート番号 8080: 接続に失敗し
ました
-----
と表示されます。

お手数ですが、よろしくお願い申し上げます。

Tomcatについての質問は多数寄せられておりますが、
それらを参考にしてインストールなど行いますが、
どうしても後一歩のところで私の場合表示できないという、もどかしい状態になっております。
どうかご存知の方いらっしゃいましたらご教示お願い申し上げます。

Tomcat5.0をWindowsXPで起動しております。
Javaはj2sdk1.4.1_02です。
通常インストールした後Startup.batを起動し、IE6.0で
http://localhost:8080もしくは
http://127.0.0.1:8080と入力、Enterキーを押しますが、画面に
Connection re...続きを読む

Aベストアンサー

>Tomcatは起動しますが
とのことですが、Tomcatが起動していないと思います。

pingが通るのはTomcatと無関係で、PCが立ち上がっていれば帰ってくると思います。

telnet localhost 8080
で接続できないとのことなので、Tomcatが起動できていないのではないでしょうか？

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報