1

すべての画像を右端に移動しているという点で、ユーザースタイルシートを使用してWebページを変更しています。それは機能しており、私がRESのドラッグズームも使用している redditと、物事が少し乱雑になる他のいくつかのサイトを除いてすべて: http://i.stack.imgur.com/nJUyK.png

そのため、画像をクリックするだけで、その密集した画像の混乱から「それを表示」できるかどうか疑問に思っていました. CSSでそれは可能ですか（私はCSSユーザースタイルシートのみを使用しているため）、私はあらゆる代替手段を受け入れています.

4

2 に答える 2

1

再スタイル化されたチェックボックス/ラジオボタンを使用してそれを行うことができます
（出典： http： //www.inserthtml.com/2012/04/css-click-states/）

表示する画像とチェックボックス（必要に応じてスタイルを設定）をコンテナにスローします

<form class="clickable"> 
  <label for="the-checkbox">Click Me!</label>
  <!-- Radiobuttons should do it, too! -->
  <input type="checkbox" id="the-checkbox" /> 
  <!-- This is the div we want to appear and disappear -->
  <div class="appear">Some text(image to appear</div>
</form>

これで、疑似セレクターを使用して、画像の可視性（またはこの場合はz-Index）を切り替えることができます:checked。

.clickable .appear { 
  display: none;
}

.clickable input:checked ~ .appear {
  /* Or change the z-Index here */
  display: block;
}

上記のリンク先の記事の下部にある「クイックデモ」をご覧ください。
クラス名やタグ名の代わりにIDをCSSセレクターとして使用することも可能です。したがって、複数の画像を切り替えることは問題にはなりません。
また、ラジオボタンを使用すると、次のボタンをクリックしたときに最後に選択したボタンが選択解除されるという魅力があります（未テスト、単なるアイデア;）。

于 2012-10-30T07:20:33.450 に答える
0

CSS3を使用できる場合は、これを確認できます：http: //designshack.net/tutorialexamples/HoverEffects/Ex2.html

基本的に

img {
height: 100px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

and 

img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
于 2012-10-30T07:48:27.967 に答える