onmouseout/onmouseover in sidepanel widget

• 

  forsakringforalla · Member · Apr 3, 2017 at 1:23 pm

  • Copy link
  • Add topic to favorites

  Hi
  I am trying to figure out how to make a mouseover effect ork in sidebar widget. My problem is that the editor cuts out part of the code every time i publish leaving me with only the image.

  <img src=”FIRST IMAGE URL GOES HERE” onmouseover=”this.src=’SECOND IMAGE URL GOES HERE'” onmouseout=”this.src=’FIRST IMAGE URL GOES HERE – AGAIN'” />

  I guess the workaround is to use CSS.

  Happy for any help to solve this issue!

  The blog I need help with is: (visible only to logged in users)

• 

  senff · Staff · Apr 3, 2017 at 1:34 pm

  • Copy link

  Hi there!

  Since the WordPress editor strips out any Javascript from the code, you can’t use things like onmouseover and onmouseout. You can use some CSS for this however.

  For this to work, you’ll have to create a DIV that contains both images in your HTML.
  In its normal state, the second image will be hidden (with CSS).
  When you hover over the DIV, the first image will be hidden and the second one visible (also with CSS).

  HTML code:

  <div class="my-awesome-div">
    <img src="http://lorempixel.com/400/300/sports/">
    <img src="http://lorempixel.com/400/300/food/">
  </div>

  CSS:

  .my-awesome-div {
    float:left;   /* Just to make sure the DIV is not full-width */
  }
  
  .my-awesome-div img:nth-of-type(2) {
    display:none;   /* This hides the 2nd image */
  }
  
  .my-awesome-div:hover img:nth-of-type(1) {
    display:none;   /* This hides the 1st image on mouse over */
  }
  .my-awesome-div:hover img:nth-of-type(2) {
    display:block;   /* This shows the 2nd image on mouse over */
  }

  Hope this helps!