我一直在阅读很多关于在div的边框上放置标签/图例/文字的文章。我有很多div,我想要显示不同的标签,如下图所示:
正如我在w3school中所看到的,他们说要设置一个字段并声明图例以显示文本,但它不适合我。我有一组jquery代码,用html附加标签:
$('.menu').hover(function () {
$(this).css('border', 'solid 2px #8080ff');
$(this).find('.divlabel').show();
}, function () {
$(this).css('border', 'none');
$(this).find('.divlabel').hide();
});
.divlabel {
float: left;
top: 5px;
right: 10px;
padding: 0px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="divlabel">Menu</div>
<ul class="mainmenu">
<li>...</li>
<li>...</li>
</ul>
</div>
<div>
它没有按预期工作,请帮助这个css的人。
答案 0 :(得分:2)
以下示例可以帮助您入门。仅限CSS的解决方案
div.wrapper {
position: relative;
border: 2px solid cornflowerblue;
margin-top: 20px;
padding: 20px 10px 10px;
}
div.wrapper label {
color: white;
line-height: 20px;
padding: 0px 5px;
position: absolute;
background-color: cornflowerblue;
/* Adjust these values to posiytion the title or label */
top: -10px;
left: 10px;
}
<div class="wrapper">
<label>Menu 1</label>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna
</div>
</div>
<div class="wrapper">
<label>Menu 2</label>
<div>
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</div>
</div>
<div class="wrapper">
<label>Menu 3</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 4</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 5</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 6</label>
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</div>
答案 1 :(得分:2)
您可以使用HTML5 data-*
属性来实现此目的。它将保存一个div
元素:
body {
font: 14px/20px Arial, sans-serif;
}
.menu {
position: relative;
border: 3px solid #8fdaf9;
padding: 30px 10px;
}
.menu:before {
content: attr(data-title);
background: #8fdaf9;
position: absolute;
padding: 0 20px;
color: #fff;
left: 0;
top: 0;
}
.menu ul {
margin: 0;
}
&#13;
<div class="menu" data-title="Menu">
<ul class="mainmenu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div>
&#13;