[英]I have plenty of divs with same class, that I want to show. This div is inside a div, so like a tooltip
I'm a noob with jQuery, so I have some problems. 我是jQuery的新手,所以遇到了一些问题。
I have many divs generated with a foreach (PHP), like this: 我有许多用foreach(PHP)生成的div,如下所示:
And then, I have some tooltip divs that look like this: 然后,我有一些如下所示的工具提示div:
foreach($posts as $post):
$id = $post['post_id'];
?>
<div id="stor" style="background-color:red; width:100px;">
<?php echo $post['user'] . " " . $post['contents'] . "<br>";?></div><br>
<div id="popup" style="display:none; background-color:black; width:100px; height:100px; color:white;"><?php echo $post['date_posted'] . " " . $post['user']; ?></div>
<?php
endforeach; ?>
So, on my first "stor" div, I want to hover over so the first "popup" div show the content. 因此,在我的第一个“ stor” div上,我想将鼠标悬停在第一个“ popup” div上以显示内容。 I hope I wasn't confusing.
我希望我不要混淆。 I'll explain better if needed!
如果需要,我会解释得更好!
You have to change the id
to class
, because id
s are unique by definition. 您必须将
id
更改为class
,因为id
在定义上是唯一的。
Your jQuery would look something like: 您的jQuery如下所示:
$('.stor:first').on('mouseover', function(e){
mouseenter: function () {
$('.popup:first').show();
},
mouseleave: function () {
$('.popup:first').hide();
});
EDIT: 编辑:
Based upon your final comment, you actually want: 根据您的最终评论,您实际上想要:
$('.stor').on('mouseover', function(e){
mouseenter: function () {
$(this).find('.popup').show();
},
mouseleave: function () {
$(this).find('.popup').hide();
});
This assumes that there is only one popup
per stor
. 这是假设只有一个
popup
每stor
。 Otherwise, use the :first
pseudoelement. 否则,使用
:first
伪元素。 See the documentation for find . 有关查找,请参见文档。
ID
s must be unique, you should use classes instead. ID
必须是唯一的,而应该使用类。 You could achieve this result with css only without jquery. 您可以仅使用css而不使用jquery来实现此结果。
.stor { background-color: red; width: 100px; } .popup { display: none; background-color: black; width: 100px; height: 100px; color: white; } .stor:hover + .popup { display: block; }
<div class="stor"> user- contents <br> </div> <div class="popup">date_posted - user</div>
If you want tooltips, this has already been solved in jQueryUI. 如果需要工具提示,这已在jQueryUI中解决。 http://jqueryui.com/tooltip/
http://jqueryui.com/tooltip/
<?php foreach($posts as $post):
$id = $post['post_id'];?>
<div class="stor" style="background-color:red; width:100px;"
title="<?php echo $post['date_posted'] . " " . $post['user']; ?>">
<?php echo $post['user'] . " " . $post['contents'] ;?>
</div>
<?php endforeach; ?>
<script>
$(document).ready(function(){
$('.stor').tooltip();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.