htmlCODE:
<div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0">
<div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; height:40px; z-index: -2"></div>
</div>
$('.original_circle').mousedown(function() {
$(this).find('div.another_circle').css('left', '50%');
$('.another_circle').hover(function() {
console.log('hover mouse in')
}, function() {
console.log('hover mouse out')
});
});
$(document).mouseup(function() {
console.log('mouse up')
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0">
<div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; height:40px; z-index: -2"></div>
</div>This sample of code displays two circles. Upon clicking on the .original_circle element, another circle (with the class another_circle) appears from a different position.
While the mouse is being held down, if it hovers over the another_circle, the following events should occur:
$('.another_circle').hover(function(){
console.log('hover mouse in')
}, function(){
console.log('hover mouse out')
});
These actions are intended to be executed according to the code above.
However, there seems to be an issue with its functionality.
How can this feature be implemented correctly?
EDIT : add codepen
link : https://codepen.io/anon/pen/gvYvWg
In the provided codepen example, I aim to change the color of another_circle to either red or orange.