mouseover event similar to buttons on bottom of questions on this website - php

Question

Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<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>

Answer 1

let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<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>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.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');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.