title: Disable mouseover events on webpage
body: <p>I am using an interactive map web service that I embed in a web page which I am using to show an interactive floor plan for an exhibit hall.The web service uses css and javascript which reside on the vendor's servers. I can modify the CSS and use it locally on my server but not allowed to modify the javascript. When a user does a mouseover on a booth on the floor plan, the booth becomes highlighted and a tooltip-like blurb appears giving information about the booth tenant. I can go directly to a highlighted booth on the floor plan using the parameter for example "www.mypage.com/mymap.htm?hotspot=100", and this will go to the interactive floor plan page and highlight booth 100 and shows the blurb. At this point, the user can move the mouse to another booth and the focus now goes to the new booth, which is highlighted, etc. I want it so that once the user gets to the floor plan page from the parameter in the link, all other mouseovers are disabled so that even if the user moves the mouse to another booth, nothing happens and the focus remains on the initial booth. I am not a CSS or javascript expert, but any help with this is greatly appreciated. If I have to create a separate duplicated floor plan page just to deal with the parameters so that I can adjust the CSS just for that page only and not the main floor plan page (without the parameters), then that's fine. I am using the map via a webview in an iOS app, but I cannot seem to find a native iOS code solution for this, so I am hoping it can be done via CSS.</p>
  
  <p>The CSS code is below:</p>
  
  <pre><code>#maTour {
  background-color:#ffffff;
  height:793px;
  position:relative;
  width:1200px;
  }
  #maPopup {
  text-align:left;
  }
  .maPopup,
  .maPopupPinned {
  }
  #maTooltip {
  z-index:10000;
  visibility:hidden;
  position:absolute;
  border:solid 1px #808080;
  color:#000000;
  background-color:#fff8dc;
  font-size:8px;
  font-family:Arial, Helvetica, sans-serif;
  padding:4px;
  font-weight:normal;
  font-style:normal;
  text-decoration:none;
  max-width:200px;
  }
  #maLayout {
  text-align:left;
  height:793px;
  padding-top:0px;
  padding-right:0px;
  padding-bottom:0px;
  padding-left:0px;
  width:1200px;
  }
  #maAbsBlock {
  overflow:hidden;
  position:absolute;
  }
  #maHotspotTitle {
  background-color:#ddffff;
  color:#1f497d;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-style:normal;
  font-weight:bold;
  }
  #maTextArea {
  background-color:#ddffff;
  }
  #maHotspotText {
  background-color:#ddffff;
  color:#000000;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  font-style:normal;
  font-weight:normal;
  }
  #maMap {
  background-color:#ffffff;
  }
  .maInstructions, maInstructionsTitle    {
  font-family:Arial;
  font-size:12px;
  }
  .maInstructions {
  padding:6px;
  border:solid 1px #777;
  }
  .maInstructionsTitle {
  font-weight:bold;
  margin-bottom:4px;
  }
  .maZoomControl  {
  z-index:4000;
  position:absolute;
  top:-4px;
  left:-4px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  </code></pre>