A 回答 (4件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
>マウスオーバーのみではなく、クリックの際に反応するもの
矛盾している。
>テキストリンクを踏んだ際
テキストリンクですからクリックしたら、リンク先に飛んでいかなきゃならない。
踏んだらでしたらマウスオーバーですよ。
サンプルを確認してください。テクストリンクにポインターを合わせると説明が表示され、クリックすると本来のリンク先に飛んでいく。
No.2
- 回答日時:
普通にtransitionプロパティを使う。
まず、HTMLは率直に文書構造だけをマークアップします。
★CSSやjavascriptが無効な検索エンジンとかで内容を把握できない。
「リンクを踏む」なのでマウスオーバーで広がるようにしてあります。示す内容は、aリンクの説明でしょうから、aのtitle属性の内容を表示するようになっています。
簡単なサンプル
注) タブは_に置換してあるので戻す
注) http://は、http://と置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA">
<style media="screen">
<!--
section p{line-height:1.6em;}
section a{position:relative;}
section a:after{
display:block;
content:attr(title);
white-space:pre-line;
position:absolute;
top:1.6em;left:0;
width:20em;
background-color:white;
z-index:10;
text-indent:1em;
transition-property: color,height;
transition-duration:2s;
transition-timing-function:ease-in-out;
overflow:hidden;
height:0;
}
section a:hover:after{
height:350px;
background-color:yellow;
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>今日、教えてgooに、<a href="https://oshiete.goo.ne.jp/qa/9642493.html" title="CSS(無理であればJavaやjQueryでも)で、テキストリンクを踏んだ際その下に隠してあった内容をふわっと、もしくはぬるっと表示させたいです。
ドロップダウンで表示するメニューボタンのボタンなしみたいなことがやりたいです。
例)▼ここをクリック
↓
▼ここをクリック
「ここに内容を表示
内容
内容」
">CSSでテキストを開いてふわっと表示<a>という質問がありました。
__</p>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
No.1
- 回答日時:
こんにちは
試したことがないので、あまりよくわかってませんが…
こんな感じではどうでしょうか?
□ CSS
#addition1, #addition2{
transition: opacity 2s;
opacity: 0;
height: 0;
}
#addition1:target, #addition2:target{
position:relative;
opacity: 1;
height: auto;
}
□ HTML
<p><a href="#addition1">▼ここをクリック</a></p>
<div id="addition1">
<p>「ここに内容を表示 11111」</p>
</div>
<p><a href="#addition2">▼ここをクリック</a></p>
<div id="addition2">
<p>「ここに内容を表示 22222」</p>
</div>
□ 参考
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Outlook(アウトルック) Outlookのメールの表示について 1 2023/07/06 18:51
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- その他(IT・Webサービス) U-NEXTの解約ができません 2 2022/11/19 18:35
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- その他(プログラミング・Web制作) GASでガントチャートを作りたいです 1 2022/09/05 17:26
- その他(スマホアプリ・スマホゲーム) capcutってアプリで質問です。 音声読み上げを使いたいんですが、写真のように 読み上げボタン?が 4 2022/05/20 00:30
- その他(Microsoft Office) Microsoft Edgeの「ニュースと関心事項」についてお聞きします。 3 2023/05/22 12:08
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
wordpressでアコーディオンメニ...
-
CSSでテキストを開いてふわっと...
-
複数のiframeの読み込みについて
-
htmlで任意の行の文字位置を右...
-
テキストボックス内にハイパー...
-
HP URLが変更に伴う自動ジャン...
-
ページによって表示位置がずれ...
-
<a href="#" …>の意味を教えて...
-
openerの関係が崩れてしまった...
-
undefinedが表示されてしまう
-
jQuery GalleryViewスライドショー
-
外部ファイルでBODYのonloadイ...
-
インラインフレームをドラッグ...
-
フレームを解除する方法
-
プルダウンメニューを別ファイ...
-
相対パスと絶対パスの速度
-
twitter widgetが表示されない
-
SQLのWHEREで全てを質問する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報
マウスオーバーのみではなく、クリックの際に反応するもの