3

作成中のページにこの製品のカルーセルがあります。

http://flytango.com.ar/test/home-publico.html

製品にカーソルを合わせると、テキストを含む div を表示したいと思います。

私はこれを使用して達成しています

.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
}

div が (緑色で) 表示されますが、40px 上にオフセットしたいと思います。したがって、「margin-top:-40px;」を試すと、カルーセル DIV によって切り取られます。

z-index を試してみましたが、すべての前に div を表示することはできません。

.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
.item_carrousel_home_on {
    width:220px;
    height:130px;
    background-color:#00FF00;
    color:#FFFFFF;
    display:none;
    position:absolute !important;
    z-index:999999 !important;
    margin:0px;
    margin-left:20px;
    margin-top:-40px !important;
}
<div id="carrousel_home">
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li>
        <a href="#" class="item_carrousel_home"><img src="imagenes/cellactive.jpg"      alt="Cellactive" width="155" height="200" border="0" />
        <br />Nombre Producto
        <br />en dos lineas</a>
        <div class="item_carrousel_home_on">HOLA</div>
    </li>
  </ul>
</div><!--fin del carrousel-->

4

4 に答える 4

1

親よりも高い z-index を子に与えることはできません。

たぶん、必要に応じて追加の div/span に配置する必要がありますか?

編集：

http://jsfiddle.net/AbWYk/3/を参照してください

コード：

.item_carrousel_home_on {
    width:220px;
    height:130px;
    background-color:#00FF00;
    color:#FFFFFF;
    display:none;
    position:absolute !important;
    z-index:999999 !important;
    margin:-80px 0 0 0;
}
于 2013-07-18T22:31:47.430 に答える
0 
.item_carrousel_home:hover + .item_carrousel_home_on {

次のようにする必要があります。

.item_carrousel_home:hover, .item_carrousel_home_on {
于 2013-07-18T22:30:10.947 に答える
-1

私の知る限り、次のものを使用する必要があります。

位置: 絶対;

CSS コードで z-index プロパティを使用します。

http://w3schools.com/css/css_positioning.asp

于 2013-07-18T22:31:51.687 に答える