文章/答案/技术大牛

发布

社区首页 >问答首页 >如何水平扩展框以在悬停时显示隐藏文本

问如何水平扩展框以在悬停时显示隐藏文本
EN

Stack Overflow用户

提问于 2020-04-11 08:55:40

回答 1查看 64关注 0票数 0

我还在学习css，所以我正在尝试一些动画之类的东西。现在，我正在尝试制作一个“技能栏”，在本例中，它将列出编程语言，并在框悬停时水平扩展以显示百分比。我现在有一个列表，它按我想要的方式扩展，但是我不完全确定如何真正创建隐藏的文本。我确信有一种更好的方法，但我尝试的方法是使用flex-box来对齐列，并让框在百分比上展开，以便像这样显示它们。但我没有考虑到这样一个事实，即扩展的flexbox只会将另一列推开。

这是我到目前为止所得到的：

                        <div class="pointer-container">

                            <div class="pointer">Proficient Languages</div>

                            <div class="skills">
                                <div class="banner-container">
                                    <div class="banner">HTML</div>
                                    <div class="banner">CSS</div>
                                    <div class="banner">PHP</div>
                                    <div class="banner">JavaScript</div>
                                    <div class="banner">React Native</div>
                                    <div class="banner">Java</div>
                                    <div class="banner">C#</div>
                                </div>

                                <div class="levels">
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                </div>

                            </div>
                       </div>

和我的css：

.pointer-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.skills{
    display: flex;
    flex-direction: row;
}

/*shape banners and style text inside*/
banner{
    width: 150px;
    height: 40px;
    position: relative;
    background: #00a6ff;
    text-align: left;
    padding-top: 8px;
    padding-left: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    transition: width 2s;
    transition-timing-function: ease;
}

.banner:hover {
    width: 400px;
}

/*give shape to the pointer header*/
.pointer {
    width: 600px;
    height: 40px;
    position: relative;
    background: #00a6ff;
    text-align: center;
    padding-top: 8px;
    margin-bottom: 10;
}

.pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #00a6ff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

抱歉，如果它是有点凌乱，但任何帮助将不胜感激！谢谢!

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-11 09:05:54

我会把你的HTML重排成这样：

<div class="skills">
  <div class="banner-container">
    <div class="banner">
      <span class="skill">HTML</span><span class="level">%</span>
      <span class="skill">CSS</span><span class="level">%</span>
      <!-- etc -->
    </div>
  </div>
</div>

那么你的CSS可以是：

.level {
 display: none;
}

.banner:hover .level {
  display: inline-block; /* or whatever */
}

它在语义上也是有意义的，对吧？你的技能的名字和你对它的精通程度应该放在一起。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61150800

复制

相似问题

问如何水平扩展框以在悬停时显示隐藏文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何水平扩展框以在悬停时显示隐藏文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何水平扩展框以在悬停时显示隐藏文本
EN