ASP.NET Flyout - Knowledge Base

« Back to Knowledge Base list

On mouse over and mouse out

Q:

I have the flyout attached to a link that is styled to change the background color on hover. However, when I move the mouse to the flyout, the background color of the link reverts to its normal color. How can I change the styling of the AttachTo object when I move to the flyout?

A:

Here is a sample code with a DIV element instead of a link.

<style type="text/css">
  .usual_div
  {
    background-color: Yellow;
    color: Blue;
    display:inline; cursor: pointer;
    border:1px solid black; padding:3px;
  }
  .hover_div
  {
    background-color: Blue;
    color: Yellow;
    display:inline; cursor: pointer;
    border:1px solid black; padding:3px;
  }
</style> 
...
<div id="Button1" class="usual_div" onmouseout="this.className='usual_div'"
       
onmouseover="this.className='hover_div'" >Hover me!</div>
 
<obout:Flyout runat="server" ID="Flyout1"  AttachTo="Button1" >
   <img src="images/calendar.jpg"/>
</obout:Flyout> 
 
<script type="text/javascript">
  // wait for the Flyout client-side object
  (function changeFlyout() {
     // Flyout object is redy?
     if(typeof <%=Flyout1.getClientID()%> == "undefined") {
        setTimeout(changeFlyout,100); // wait
        return;
     }
     // intercept event handling
     //-------------------------
     // save the original method
     <%=Flyout1.getClientID()%>.objEvent._org_notifyEvent = <%=Flyout1.getClientID()%>.objEvent.notifyEvent;
     // our new handler
     <%=Flyout1.getClientID()%>.objEvent.notifyEvent = function (txtEvent, evt) {
        if(txtEvent == "contentlayer.mouseover") { // Flyout hovered
           // change the target's CSS
           this.objParent.objTarget.className = "hover_div";
        } else if(txtEvent == "contentlayer.mouseout") { // mouse out
           // change the target's CSS
           this.objParent.objTarget.className = "usual_div";
        }
        // call the original method
        return this._org_notifyEvent(txtEvent, evt);
     }
  })();
</script>