JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wbw">
<a class="wh" onmouseover="showIframe()" onmouseout="hideIframe()"></a>
<div id="ta_widget_box" onmouseover="showIframe()" onmouseout="hideIframe()"></div>
<script language="Javascript" src="http://reviews.treatmentabroad.com/js/widget.js"></script>
<script language="Javascript">
var intervalId;
var intervalDuration = 500;
function showIframe(){
clearTimeout(intervalId);
document.getElementById('ta_widget_box').style.display='block';
}
function hideIframe(){
intervalId = setTimeout("hideIframeCallback()", intervalDuration);
}
function hideIframeCallback(){
document.getElementById('ta_widget_box').style.display='none';
}
init_widget_rnr('278237/es','ta_widget_box');
</script>
</div>
CSS
/* Widget - iframe na hlavni strance */
#ta_widget_box, #wbw {
position: absolute;
left: 20px;
top: 20px;
height: 156px;
width: 262px;
}
#wbw {
z-index: 10000;
}
#ta_widget_box {
position: absolute;
top: 0;
left: 0;
z-index: 900;
display: none;
}
#ta_widget_box iframe {
border-radius: 10px;
-webkit-box-shadow: 0px 2px 5px -1px #333;
box-shadow: 0px 2px 5px -1px #333;
height: 156px;
position: relative;
z-index: 1000;
}
#ta_widget_box:hover {
display: block;
}
#wbw a.wh {
width: 261px;
height: 55px;
display: block;
background: url('http://durian.newlogic.cz/img/widget/bg.png') no-repeat left top;
cursor: pointer;
border: 0;
border-radius: 10px 10px 10px 15px;
-webkit-box-shadow: 0px 2px 5px -1px #333;
box-shadow: 0px 2px 5px -1px #333;
position: relative;
z-index: 2000;
}
#wbw a.wh:hover {
box-shadow: 0;
-webkit-box-shadow: 0;
}
/*
#wbw a.wh:hover + #ta_widget_box {
display: block;
}*/