0

最終的に結果を把握し、js と css の両方を一緒に使用して動作させました。ありがとうございます :) FINAL JSFIDDLE CODE

以下のコードを見つける

他のコードを使用して例を作成し、'info <DIV>'画像にマウスオーバーすると表示されるようにしましたが、画像の上に表示しようとすると問題が発生し"caption <DIV>"ます。CSSにコードを追加しようとしましたが、何をしても"info <DIV>"表示されなくなります:(

誰かがこのコードのセットを調べてください：jsfiddle

"info <DIV>"別々に表示できれば<div>大変助かります。ありがとうございます。それでは、お元気で。

コードhtml

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>

<div class="caption">SYMBOL</div> 

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption">STAR</div>
​

CSSコード

.team , .info{
 background: #151515;
 height: 150px;
 width: 150px; 

}
.info{

    background:white;
    height: 50%;
    width: 20%;
    display:none;
position: absolute; 
    top: 10px;
    right: 10px;
}


.team:hover + .info {

   display:block; }


.team {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .team:hover {
      opacity: 0.5;
      }​
4

3 に答える 3

1

CSS ができることは信じられないほどですが、あまり乱用しないでください。完全に CSS で作成された非常に凝ったウィジェットとテンプレートがいくつかありました (これは素晴らしいことです) が、CSS を「ハック」するときと JavaScript を使用するときは注意することをお勧めします。私見これはCSSハックです：

.team:hover + .info {
  display:block;
}

CSS を使用して、要素内の NESTED 要素のスタイル/表示を変更することは問題ありません。たとえば、次のようになります。

<div>
  <a class="close" href="#">Close me</a>
</div>

ホバーすると表示さ<divれa.closeます (display: block;)。

特定のケースでは、css を使用してネストされていない要素の表示を変更しています。css ハックの代わりに JavaScript を使用することをお勧めします。これは、ユーザーがマウスを画像から離してキャプション div にカーソルを合わせ、テキストを強調表示できるようにしたい場合 (おそらくそうするでしょう)、リンクをクリックするなどの理由からです。 . JavaScript を使用する必要があります。CSS は機能が制限されており、transcend を本来の目的以外で使用すると複雑さが大幅に増します。

そのため、javascript (jquery またはその他のライブラリを使用) をお勧めします。

于 2012-12-28T11:57:05.830 に答える
0

最終コード

html

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>



  <style type='text/css'>

      .team img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;

}
.team .caption {
    position: absolute;
    bottom: 1px;
    right: 0px;
    width: 100%;
    height: 25%;
    display: none;
    z-index: 2;
    text-align: right;
    color: #ffffff;
    padding: 10px;
    background: rgba(0, 0, 0, .75);

}

.team .caption a {
    color: #ffffff;
}
  </style>




<body>
  <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').mouseover(function() {
    $(this).find('.caption').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.caption').fadeOut(100);
});
});//]]>  

</script>
      <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').hover(function() {
    $(this).find('.info').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.info').fadeOut(100);
});
});//]]>  

</script>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >

<div class="caption">SYMBOL</div>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">

<div class="caption">STAR</div>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>

</body>​

CSS

.team {
 background: #151515;
 height: 150px;
 width: 150px; 
    position: relative;

}
.info{
    background:white;
    height: 100%;
    width: 100%;
    display:none;
position:fixed;
    float:right;
    top: 0px;
    left: 70% ;
    z-index: 99;
}
于 2012-12-28T19:53:57.157 に答える
0

css にキャプション クラスを追加し、キャプションのスタイルを設定しました。あなたのコードでは、キャプションは画像の下にとどまります。次にposition:relative、下から20pxの位置を設定します。background-color:red場所がわかるようにを付けました。また、画像の幅としてキャプションの幅を 150px にしました。クラスteam、infoおよび を使用しましたcaption。team1すべての画像でマウスオーバー機能を個別にターゲットにするためにteam2、すべてinfo1の画像に対して 2 つの異なる種類のクラスを作成しましinfo2た。Web ページで 3 つの画像を使用する場合は、html、css、および jquery 関数に 、 などを追加する必要があります。（コピーして貼り付けて名前を変更するだけです）。ID付きの親divを追加しましたcaption1caption2team3info3caption3imageこれにより、すべての画像がラップされ、相対的な位置が決まります。必要に応じてコードを編集できます。

編集した HTML は次のとおりです。

<div id="image">
 <img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-  Critical-icon.png" class="team1"/>

<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR></div>

<div class="caption1">SYMBOL</div> 
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-    Favourite-1-icon.png" alt="" class="team2"/>

<div class="info2">and this is a star<BR>and this is a star<BR>and this is a    star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption2">STAR</div>
</div>​

</p>

編集した CSS は次のとおりです。

.team1 {
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;

}

.info1{
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team2{
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;    

}

.info2 {
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team1:hover {
      opacity: 0.5;
}

.team2:hover {
      opacity: 0.5;
}

.caption1  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

.caption2  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

#image {
position:relative;
}

</p>

次に、他の HTML コードの後に​​ HTML ページの本文に配置できるいくつかの jquery 関数を追加しました。

$(".team1").mouseout(function () {
    $(".caption1").css("visibility","hidden");
 $(".info1").css("visibility","hidden");   

  });


$(".team1").mouseover(function () {
    $(".caption1").css("visibility","visible");
$(".info1").css("visibility","visible");
});

$(".team2").mouseout(function () {
    $(".caption2").css("visibility","hidden");
$(".info2").css("visibility","hidden");
  });


$(".team2").mouseover(function () {
    $(".caption2").css("visibility","visible");
$(".info2").css("visibility","visible");
  });

jquery 関数を使用するには、次の<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>ように、HTML ページの先頭に次のように挿入して、ページに jquery ライブラリを含める必要があります。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>

これがjsfiddleのデモです

于 2012-12-28T12:01:02.173 に答える