JS Hovering problem...

by 1 replies
1
I have tried several different things but none of them are working.. I have been staring at this for 2 hours... I am a php PROGRAMMER but I need to learn JS so any help is DEEPLY appreciated! If anyone is interested in mentoring please PM me...

The Problem:
I want the div to transition on mouseover to one class "hover-pane transition" and on mouseout to class "content-pane 'this.id' transition" or to simply revert the class.

The code below is what I am currently using and it doesn't work:

The javaScript:

<script type="text/javascript">
function changeClassHoverPane(){
var elementId;
elementId=this.id;
this.className='content-pane "elementId" transition';
}
</script>

The HTML:

<div class="content-container">
<div class="content-pane 1 transition" id="c-1" onmouseover="this.className='hover-pane transition';" onmouseout="setTimeout(changeClassHoverPane, 2000);" >
<a class="transition" href="http://www.thephpboss.com/">The php boss dot com is here......</a>
</div>


Here is a link to the page:

ThePhpBoss Web programming, and Web development
#website design #css #hovering #javascript #problem
  • Have you tried passing the object reference into the function:

    Code:
    function changeClassHoverPane(this){}
    I usually use jQuery for things like this. The advantage is that you do not have to attach an event handler to the object, you could just bind the event to the object in your script block.

    If jQuery is an option for you, let me know and I can help you out with the code.
Join the discussion

Next Topics on Trending Feed

  • 1

    JS Hovering problem...

    I have tried several different things but none of them are working.. I have been staring at this for 2 hours... I am a php PROGRAMMER but I need to learn JS so any help is DEEPLY appreciated! If anyone is interested in mentoring please PM me... The Problem: