我有两个独立的<span>
当前出现在彼此之上/之下的元素。我想让它们并排出现。我读过很多这样的答案,解决方案是使用 float
但它对我不起作用(也许我的 HTML/CSS 已关闭?)我希望能够在用户将鼠标悬停在该特定按钮上时显示/滑动其他文本。
HTML:
<div class="skills">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Tutoring</h1>
<p>Weekly one on one tutor, teaching concepts of object oriented programming and introduction to game design with Java and the Dr. Java IDE</p>
<button type="button" class="round-button" onclick="clickTutoring()">
<span>></span>
<span class="button-hover">Click here to learn more</span>
</button>
<!-- ...other things here... -->
</div>
</div>
</div>
</div>
CSS:
.round-button {
display: block;
width: 40px;
height: 40px;
line-height: 30px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color: #f5f5f5;
text-align: center;
background: #464646;
outline: none;
}
.button-hover {
display: inline;
white-space: nowrap;
background-color: #464646;
}
JS:
$(document).ready(function() {
//Hide the Click Here text upon loading the webpage
$('.button-hover').hide();
//Upon hovering, text will show across the across
var buttonHover = $(function() {
$('.round-button').hover(function() {
$('.button-hover').toggle('slide');
});
});
});
最佳答案
现在定义你的
.round-button {
position:relative;}
和 这个
.button-hover {
display: inline-block;
vertical-align:top;
position: absolute;
left: 35px;
top:5px;
}
演示
$(document).ready(function() {
//Hide the Click Here text upon loading the webpage
$('.button-hover').hide();
//Upon hovering, text will show across the across
var buttonHover = $(function() {
$('.round-button').hover(function() {
$('.button-hover').toggle('slide');
});
});
});
.round-button {
display: block;
position:relative;
width: 40px;
height: 40px;
line-height: 30px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color: #f5f5f5;
text-align: center;
background: #464646;
outline: none;
}
.button-hover {
display: inline-block;
vertical-align:top;
white-space: nowrap;
background-color: #464646;
position: absolute;
left: 35px;
top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="skills">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Tutoring</h1>
<p>Weekly one on one tutor, teaching concepts of object oriented programming and introduction to game design with Java and the Dr. Java IDE</p>
<button type="button" class="round-button" onclick="clickTutoring()">
<span>></span>
<span class="button-hover">Click here to learn more</span>
</button>
<!-- ...other things here... -->
</div>
</div>
</div>
</div>
关于jquery - 将两个 <span> 元素并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33995420/