だから私はモバイルマイクロサイトを開発しています.クリック/指オーバー状態など.さらに、そのdivの幅全体がボタンのように動作するため、幅を指定しない限り、小さな電話またはタブレットのいずれかで、アクティブ状態が左から「ブロック」として常に正しい
たとえば、通常のテキスト リンクがあるとします。このような:
<div class="mainBtns"><a href="gallery.php">Portfolio</a></div>
id にこの CSS を指定して、マウスオーバー/finget などでクリックしたときに、ios ボタン/タブのように動作するようにします。
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
今それは言った。これが解決しようとしている問題です。
私はthumbItemW(コンテンツラッパー)と呼ばれる親Divを持っています。およびgalThumbとgalThumbtxtという 2 つの子項目
コンテンツ ブロックは次のようになります。
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
<a href="gallery-highrise.php" alt="">HIGH RISE CONTEMPORARY</a>
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
私がやりたいことは、ユーザーの指が親divをクリックすると、上記の例のように背景色が変化することです"mainBtns / mainBtns a:hover"
問題は、mainBtns の最初の例とは異なり、これには子項目があるため、次のようなことをすると、
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
またはこのようなもの、要素はこの親div内のフロートであるため、これはidが望むようには機能しません。
私がしたいのは、親 div .thumbItemWを表示ブロックのようにして、ユーザーがクリックしたときに、その div 幅に沿ってどこでもクリックでき、ボタンの上で右クリックするのとは対照的にボタンをアクティブにできるようにすることです。文章。
これは私が持っている方法で達成できますか?これは、javascript/jquery を使用せずに CSS だけで実現できますか?
あまり混乱しないことを願っています。