Php 鼠标悬停事件类似于此网站问题底部的按钮
嗯 首先,如果单击此页面顶部的“问题”链接,每个问题在底部都有一些与问题相关的按钮。当你将鼠标滑过它们时,它会显示更多关于按钮的信息。这是怎么做到的?我想在我的网站上这样做 因此,基本上,我使用一个php while循环从mysql中的用户id回显listitems的查询。 每个listitem包含更多的块和内联元素。其中一些块元素附带了onmouseover/mouseout事件。但是,如果我在这些元素上使用相同的类名,当我触发鼠标悬停时,它会触发具有该类名的每个元素。我对php/js/jquery还不熟悉,不确定最好的方法是什么。任何帮助都是巨大的。下面的例子Php 鼠标悬停事件类似于此网站问题底部的按钮,php,javascript,jquery,Php,Javascript,Jquery,嗯 首先,如果单击此页面顶部的“问题”链接,每个问题在底部都有一些与问题相关的按钮。当你将鼠标滑过它们时,它会显示更多关于按钮的信息。这是怎么做到的?我想在我的网站上这样做 因此,基本上,我使用一个php while循环从mysql中的用户id回显listitems的查询。 每个listitem包含更多的块和内联元素。其中一些块元素附带了onmouseover/mouseout事件。但是,如果我在这些元素上使用相同的类名,当我触发鼠标悬停时,它会触发具有该类名的每个元素。我对php/js/jqu
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
让我们先解决一些小问题。您实际上不需要将所有HTML放在一个字符串中,您可以执行以下操作:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
因此,我们为链接设置了classtag
,我们希望将其悬停并查看内部元素,我们将鼠标取出,它应该会消失,让我们看看jQuery需要什么(别忘了将其添加到您的页面):
下面是一个例子:
本例中使用的jQuery方法:
希望这能有所帮助。非常有效。=)非常感谢。顺便说一句,你并不需要JavaScript来完成这项工作:你可以用CSS来完成(注意:这个转换在IE中不起作用)
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);