Question

我在这个页面构建中有这个产品的转盘。

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放在一切之前。

<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-->

和css

.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;
}

Answer 1

.item_carrousel_home:hover + .item_carrousel_home_on {

应该是：

.item_carrousel_home:hover, .item_carrousel_home_on {

Answer 2

你不能给孩子一个比它的父亲更高的z指数。

也许你必须把它放在额外的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; }

Answer 3

据我所知，您需要使用：

位置：绝对;

在CSS代码中使用z-index属性。

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

Answer 4

由于HOLA div具有position: absolute，因此您可以使用top:-40将其上移40px。我还建议您添加pointer-events:none;以停止闪烁。

@font-face {
    font-family:'Helvetica';
    src: url('fonts/helvetica2.eot');
    src: url('fonts/helvetica2.eot?#iefix') format('embedded-opentype'), url('fonts/helvetica2.woff') format('woff'), url('fonts/helvetica2.ttf') format('truetype'), url('fonts/helvetica2.svg#helvetica2') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Arial Narrow, sans-serif;
    font-stretch: condensed;
    font-size:18px;
    color:#828282;
    font-weight:bold;
    background-image:url(imagenes/bg.jpg);
    background-repeat:repeat-x;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #F6F6F6;
    text-align:center;
}
a:link {
    text-decoration: none;
    color:#666666;
}
a:visited {
    text-decoration: none;
    color:#666666;
}
a:hover {
    text-decoration: none;
    color:#000000;
    text-decoration:underline;
}
a:active {
    text-decoration: none;
    color:#666666;
}
/** COLORES **/
 .negro {
    color:#000000;
}
.gris {
    color:#CCCCCC;
}
.rojo {
    color:#ED1C2F;
}
/** **/
 #contenedor {
    width:940px;
    height:500px;
    margin:auto;
    position:relative;
}
#header {
    width:940px;
    height:147px;
    float:left;
    background-image:url(imagenes/shadow_940.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    padding-bottom: 85px;
    position:relative;
    z-index:99999;
}
#barra_header {
    width:910px;
    height:23px;
    border:1px solid #CCC;
    border-top:0px;
    float:left;
    font-size:14px;
    font-style:normal;
    text-align: left;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 15px;
}
#idiomas_header {
    float:left;
}
.banderita_header {
    margin-right:7px;
}
#universo_prof_header {
    float:right;
    height: 28px;
    background-image: url(imagenes/flecha_header.jpg);
    background-repeat: no-repeat;
    background-position:56% 0%;
    margin-top:-5px;
    padding-top:5px;
}
#universo_prof_header a:link {
    font-style:normal;
    color:#828282;
}
.flecha_universo_prof_header {
    margin-left:10px;
    margin-right:10px;
    margin-top:8px;
}
.logo {
    margin-top:15px;
    float:left;
}
#menu-header {
    width:940px;
    float:left;
    position:absolute;
    left:-3px;
    top:97px;
    z-index:9999 !important;
}
#slider {
    width:940px;
    height:368px;
    float:left;
    padding:0px;
    margin:0px;
    left:0px;
    margin-top:-45px;
}
#destacados_home {
    font-family:'Helvetica', Arial Narrow;
    font-size:40px;
    text-shadow: 0px 3px #FFFFFF;
    font-weight:normal;
    font-style: normal;
    width:940px;
    height:50px;
    color:#808080;
    float:left;
    margin-top: 70px;
    background-image: url(imagenes/linea_destacados.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#carrousel_home {
    width:940px;
    background-color:#FFFFFF;
    float:left;
    margin-top: 40px;
    border: 1px solid #CCC;
    margin-bottom: 50px;
    padding-bottom: 20px;
    padding-top: 10px;
}
.item_carrousel_home {
    width:155px;
    float:left;
    margin-left:10px;
    margin-right:10px;
    font-size: 19px;
    color: #4f4f4f;
    line-height: 19px;
}
.item_carrousel_home:hover {
    color:#FF0000;
    text-decoration:none;
}
.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;
    top:-40px;
    pointer-events:none;
}
.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
}
.jcarousel-skin-tango .jcarousel-container {
    background: #FFF;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 920px;
    height:240px;
    padding-left:15px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 920px;
    height: 275px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width: 75px;
    height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
    width: 172px;
    height: 275px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
 *  Horizontal Buttons
 */
 .jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 100px;
    right: -50px;
    width: 32px;
    height: 50px;
    cursor: pointer;
    background: transparent url(../imagenes/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../imagenes/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 100px;
    left: -48px;
    width: 32px;
    height: 50px;
    cursor: pointer;
    background: transparent url(../imagenes/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(../imagenes/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

<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-->

用z-index在一切前面的div

4 个答案: