0

ホバーされた別のdivの上にdivを配置しようとしています。しかし、マウスで新しいdivに乗ると、ホバーした画像が消えます..

誰でもこれを修正する方法を知っていますか? ちなみにホバーは同点です:)

私のウェブサイトはこれです:私のウェブサイト

ホバーのコードは次のとおりです。

.vierkant img{
position:absolute;
width:116px;
height:254px;
top:0px;
margin:0 auto;
margin-left:-58px;
opacity:0.91;
z-index:3;

-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
transition-duration: 1.2s;}

.vierkant img:hover{
position:absolute;
width:80%;
height:95%;
top:2%;
left:auto;
right:auto;
margin-left:-40%;
visibility:visible;
z-index:4;
opacity:1;}

私のhtmlコードはこれです：

<div class="vierkant" align="center">
    <img src="img/knoppen/vierkant.jpg" width="90" height="93" />         
</div>
4

4 に答える 4

1

回答が受け入れられたことは知っていますが、本当ですか？このような単純なタスクに jQuery や JavaScript を使用するのは、簡単に実行でき、通常は CSSで実行される場合はやり過ぎです。

まずalign=""、html のプロパティは非推奨です。top, left, margin, & margin-leftまた、なぜプロパティを追加するのですか? 同じことを達成することを目的としたプロパティを再定義することはほとんど役に立ちません (特に、position相対的ではないために一部のプロパティが機能しない場合)。

その上にテキストを表示する場合は、画像を使用しないでください。代わりに、div を使用します。background-image: url('yourimg.png');

ここで正しいコードを使用してフィドルを作成し、jQuery はもちろんのこと、javascript の必要性を取り除きました: http://jsfiddle.net/M4UYx/

このソリューションの方がはるかに優れているのはなぜですか?

  1. 背景が単なる色の場合（あなたの場合のように）、画像は必要ありません
  2. JavaScriptは必要ありません（したがって、よりクロスブラウザです）
  3. あなたは確かにjQueryを必要としません
  4. 消えてしまうことを心配することなく、テキストを配置したり、他の方法で配置したりできます:hover

編集:元の質問の一部ではありませんが; div の位置を中央に配置するには、次のプロパティを指定します。

.vierkant {
  position: absolute;
  left: 50%;
  margin: 0px -58px; /* -58px = width divided by 2 in negative */
}
于 2013-05-14T12:14:49.917 に答える
0

ほら、その背後にあるロジックをお見せしようと思います。

はCSSすでに持っているので、変更する必要はありません。

JS

$(document).ready(function() {
  $("#HiddenObject").hide(); 
});

$(".vierkant").hover(
  function() {
    $("#HiddenObject").show('fast'); 
  }
  function() {
    $("#HiddenObject").hide('fast'); 
  }
);

HiddenObject表示したいテキストを保持するオブジェクトはどこにありますか。

このjsFiddleを見てください

于 2013-05-14T11:55:00.470 に答える
0

それ#vierkantがネクタイの上にあり、#vierkant_infoそのネクタイをクリックすると表示される div だとしましょう。

クリックする#vierkantと、divでスライドします#vierkant_info

Jクエリ

 $("#vierkant").click(function(e) {

                e.preventDefault();
                $("#vierkant_info").slideDown("slow");

            });

CSS

#vierkant_info{
//your styling//
visibility:visible; // REMOVE THIS
display:none; //ADD THIS
z-index:4;
opacity:1;}

ノート：<a href="#vierkant_info" id="vierkant">click</a></div>

クラスの代わりにdiv IDを作成したことに注意してください

于 2013-05-14T11:55:42.693 に答える
0

あなたのコードをこれに変更しました

.vierkant div{
position:absolute;
background-color:;
height:254px;
width:116px;
top:0;
left:50%;
margin-left:-58px;
z-index:10;

-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
transition-duration: 1.2s;}

.vierkant div:hover{
margin-left:0;
background-color:#FF6600;
height:90%;
width:90%;
top:5%;
left:5%;
z-index:10;}


.vierkant div.content{
opacity:0;
height:100%;
width:100%;
top:0%;
left:0%;
overflow:scroll;
overflow-x:hidden;}


.vierkant:hover div.content{
opacity:1;

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;}

そして、それは今パーフェクトです！

あなたのコードを見た後、私たちはついにこれにたどり着いたので、どうもありがとう！

于 2013-05-16T09:02:51.427 に答える