Question

I want to accomplish that when the mouse hovers a div, the corresponding div inside the div they just hovered to display. Like, when you hover over a post and other options automatically show up? Well, I did it.. sorta. My problem is that the mouseover GET ID is only the latest ONE.

Let’s say I have this:

<div id="answer-22" class="answer-sep">   

Answer goes here. Lorem impulse dolor...

<div class="answer-footer">
<a title="permalink" class="timestamp-answer" href="#">1 hours, 29 minutes ago</a> by an anonymous poster 
<div class="answer-options" id="options-22" style="float:right;display:none;">

<a id="22" href="#" class="close">[edit]</a> | <a id="22" href="#" class="close">[delete]</a> | <a id="22" href="#" class="report">[report answer]</a>
</div> <!-- end answer-options -->
</div> <!-- end answer footer -->
</div> <!-- end answer-sep -->


<div id="answer-21" class="answer-sep">

Answer goes here. Lorem impulse dolor...

<div class="answer-footer">
<a title="permalink" class="timestamp-answer" href="#">2 hours, 11 minutes ago</a> by an anonymous poster 
<div class="answer-options" id="options-21" style="float:right;display:none;">

<a id="21" href="#" class="close">[edit]</a> | <a id="21" href="#" class="close">[delete]</a> | <a id="21" href="#" class="report">[report answer]</a>
</div> <!-- end answer-options -->
</div> <!-- end answer footer -->
</div> <!-- end answer-sep -->

<div id="answer-20" class="answer-sep">
Answer goes here. Lorem impulse dolor...
<div class="answer-footer">

<a title="permalink" class="timestamp-answer" href="#">4 hours, 49 minutes ago</a> by an anonymous poster 
<div class="answer-options" id="options-20" style="float:right;display:none;">

<a id="20" href="#" class="close">[edit]</a> | <a id="20" href="#" class="close">[delete]</a> | <a id="20" href="#" class="report">[report answer]</a>

</div> <!-- end answer-options -->
</div> <!-- end answer footer -->
</div> <!-- end answer-sep -->

As you can see, it’s a list of DIVs. Now let’s say I have this:

<script type="text/javascript">
$(function() {
    $(".answer-sep").mouseenter(function(){
        var getID = $('.answer-sep').attr("id");
        var theID = getID.split("-");
        alert('Trying to show ID: #'+theID[1]+' and -- ' + getID);
        $('#options-'+theID[1]).slideUp("slow");
        });
    });
</script>

Whenever I rollover ANY of the divs.. I get Trying to show ID: #22 and -- 22 which is WRONG. It’s getting like the highest one up ONLY. Help?

Answer 1

Try this:

$(function() {
        $(".answer-sep").mouseenter(function(){
            var getID = $(this).attr("id");
            var theID = getID.split("-");
            alert('Trying to show ID: #'+theID[1]+' and -- ' + getID);
            $('#options-'+theID[1]).slideUp("slow");
            });
});