JSFiddle - React, Tailwind, and code Playground

by gthmb

HTML

<script src="http://greenethumb.com/github/raphael.set.hoverset/raphael.set.hoverset.js"></script>
<p>using hoverset:</p>
<div id="paper1"></div>
<div id="paper1output"></div>

<p>not using hoverset:</p>
<div id="paper2"></div>
<div id="paper2output"></div>

CSS

#paper1output, #paper2output {
    border: 1px solid #ddd;
    display: inline;
    position: absolute;
    left: 380px;
    width: 200px;
    height: 250px;
    overflow: scroll;
}

#paper1output {
    top: 25px;
}

#paper2output {
    top: 310px;
}

JavaScript

// ----------- paper1 --------------- //
var r = Raphael('paper1', 350, 250);
r.rect(0, 0, 350, 250).attr('fill', '#ffffff');

// create first set
r.setStart()
r.circle(50, 50, 100).attr({
    fill: '#996600',
    opacity: .5
});
r.circle(100, 100, 100).attr({
    fill: '#996600',
    opacity: .5
});
r.circle(150, 150, 100).attr({
    fill: '#996600',
    opacity: .5
});
var set = r.setFinish();

// create second set
r.setStart()
r.circle(300, 50, 100).attr({
    fill: '#660000',
    opacity: .5
});
r.circle(250, 100, 100).attr({
    fill: '#660000',
    opacity: .5
});
r.circle(200, 150, 100).attr({
    fill: '#660000',
    opacity: .5
});
var set2 = r.setFinish();

// concat sets
set.push(set2);

// listen to events with hoverset
set.hoverset(r, function() {
    console.log('over')
    document.getElementById('paper1output').innerHTML += 'over<br>';
}, function() {
    console.log('out');
    document.getElementById('paper1output').innerHTML += 'out<br>';
});



// ----------- paper2 --------------- //
var r = Raphael('paper2', 350, 250);
r.rect(0, 0, 350, 250).attr('fill', '#ffffff');

// create first set
r.setStart()
r.circle(50, 50, 100).attr({
    fill: '#996600',
    opacity: .5
});
r.circle(100, 100, 100).attr({
    fill: '#996600',
    opacity: .5
});
r.circle(150, 150, 100).attr({
    fill: '#996600',
    opacity: .5
});
var set = r.setFinish();

// create second set
r.setStart()
r.circle(300, 50, 100).attr({
    fill: '#660000',
    opacity: .5
});
r.circle(250, 100, 100).attr({
    fill: '#660000',
    opacity: .5
});
r.circle(200, 150, 100).attr({
    fill: '#660000',
    opacity: .5
});
var set2 = r.setFinish();

// concat sets
set.push(set2);

// listen to events with hover
set.hover(function() {
    console.log('over')
    document.getElementById('paper2output').innerHTML += 'over<br>';
}, function() {
    console.log('out');
    document.getElementById('paper2output').innerHTML += 'out<br>';
})