作成中のページにこの製品のカルーセルがあります。
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-->