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 回答
0

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

于 2018-12-18T21:23:43.670 回答
-1

据我所知，您需要使用：

位置：绝对；

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

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

于 2013-07-18T22:31:51.687 回答