我怎么会在这个div中的图像翻转没有得到覆盖？ [英] how would I have the image in this div with rollover not get the overlay?

问题描述

如果还有任何方法可以简化此代码中发生的情况，那么将会被赞赏

谢谢！

HTML

 < a href =＃> 
< span class =rollover-button>< / span> 
< div class =the-button>< div class =innerbox>< img src =http://i.stack.imgur.com/QSFeU.png> < / div>< p>一些链接< / p>< / div> 
< / a> 
  

CSS

  .rollover-button {
 opacity：0; 
背景颜色：＃2570B0; 
 height：29px; 
 width：175px; 
位置：绝对; 
 z-index：10; 
} 
 
 .rollover-button：hover {
 opacity：.6; 
} 
 
。这个按钮{
 background-color：＃B5B3BE; 
 width：175px; 
 height：29px; 
颜色：白色; 
 font-weight：bold; 
职位：亲属; 
} 
 
。按钮p {
 position：absolute; 
 right：35px; 
 top：5px; 
保证金：0; 
} 
 
 .innerbox {
 width：29px; 
 height：29px; 
位置：绝对; 
 top：0px; 
 left：0px; 
保证金：0; 
背景颜色：＃5D6C6B; 
} 
 
 .innerbox img {
 margin：2px; 
 width：25px; 
 height：25px; 
 z-index：1; 
 
  

解决方案 z-index 属性仅适用于定位元素 a>。

因此，如果您希望聊天气泡出现在其他元素上，您必须将其定位。 （即添加 position：relative ），然后在这种情况下增加 z-index 值。

更新示例

  .innerbox img {
 margin：2px; 
 width：25px; 
 height：25px; 
 z-index：20; / *从1增加 - > 20 * / 
位置：相对; / *添加了这个.. * / 
} 
  

<$ c的默认值$ c> position 属性是 static ，这就是它无法工作的原因。

was wondering how I would have the white chat bubble escape the overlay.

if there is also any way to simplify whats happening here with this code that would be appreciated too, I'm sure this is over the top.

thanks!

HTML

<a href="#">
<span class="rollover-button"></span>
<div class="the-button"><div class="innerbox"><img src="http://i.stack.imgur.com/QSFeU.png"></div><p>some link</p></div>
</a>

CSS

.rollover-button {
    opacity: 0;
    background-color: #2570B0;
    height: 29px;
    width: 175px;
    position: absolute;
    z-index: 10;
}

.rollover-button:hover {
     opacity: .6;
}

.the-button {
    background-color: #B5B3BE;
    width: 175px;
    height:29px;
    color: white;
    font-weight: bold;
    position: relative;
}

.the-button p {
    position: absolute;
    right: 35px;
    top: 5px;
    margin: 0;
}

.innerbox {
    width: 29px;
    height: 29px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    background-color: #5D6C6B;
}

.innerbox img {
     margin: 2px;
     width: 25px;
     height: 25px;
     z-index: 1;
}

解决方案

The z-index property only applies to positioned elements.

Therefore if you want the chat bubble to appear over the other elements you would have to position it. (i.e., add position: relative), then increase the z-index value in this case.

Updated Example

.innerbox img {
    margin: 2px;
    width: 25px;
    height: 25px;
    z-index: 20;          /* Increased from 1 -> 20 */
    position: relative;   /* Added this.. */
}

The default value of the position property is static, which is why it wasn't working.

这篇关于我怎么会在这个div中的图像翻转没有得到覆盖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！