html - 滑出面板？

Question

我正在做一个小项目，我把这个面板放下了，但我想改变“标签”的位置，就像这样http://s26.postimg.org/5tr23ln9l/little_text.png 我希望你能帮助我，亲爱的，我这里有点“新手”~

http://jsfiddle.net/2YhzT/

#purple {
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
text-align: center;
font-size: 11px;
position:fixed;
left:-50px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
x-index:999;
}

我认为这部分有问题；

Answer 1

Demo

css

#purple {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    position:fixed;
    height:10px;
    left:-50px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    x-index:999;
}
#purple:hover {
    left:0px;
}
#purple:hover > div {
    display: inline-block;
}
#red {
    font-size: 11px;
    background: #FEFEFE;
    border:1px solid;
    border-left:none;
    padding:5px 0 5px 0;
    width:100px;
    height:10px;
    x-index: 50;
}
#redtab {
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius:0px;
    border:1px solid;
    border-left:none;
    text-align: center;
    height:10px;
    padding:5px 0 5px 0;
    width:25px;    
    font-size: 11px;
}

---

或者根据您的图像示例 Demo

css

#purple {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    position:fixed;
    height:10px;
}
#purple:hover > div {
    display: inline-block;
}
#red {
    font-size: 11px;
    background: #FEFEFE;
    border:1px solid;
    border-left:none;
    padding:5px 0 5px 0;
    width:100px;
    height:10px;
    x-index: 50;
}
#redtab {
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius:0px;
    border:1px solid;
    border-left:none;
    text-align: center;
    height:10px;
    padding:5px 0 5px 0;
    width:25px;    
    font-size: 11px;
}

Answer 2

http://jsfiddle.net/2YhzT/6/

添加这个#redtab似乎可以解决它。

position:relative;
top:-19px;
left:100px;

但是，使用 andisplay:inline-block是更好的方法。添加这个#redtab：

display: inline-block;
position:absolute;
top:0px;
left:100px;

同时，不要忘记添加display:inline-block。#red

现在，它也适用于窗口调整大小。

多一个

• http://jsfiddle.net/2YhzT/7/

如果您希望它显示和隐藏，如果我从字面上理解您的图像，那么请执行以下操作：

1. 添加display:none到#redtab（所以默认情况下它是隐藏的）

2. 一旦我们hover在主导航元素上，我们可以通过以下方式显示它：

   #purple:hover #redtab {
       display: inline-block;
   }
   

动画演示（注意没有抖动）。