Reputation: 4162
I have started learning Jquery today from W3Schools. I am trying some examples.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.mouseover').mouseover(function () {
alert("Entered")
})
})
</script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>
I want to assign two functions to the same class mouseover
which takes two events mouseenter
and mouseleave
. I do not want to use hover. I just want to know the process how it can be done?
To assign different methods by selecting a same element. Like clicking on a class will do one thing, hovering over it will do other and so on.
Upvotes: 0
Views: 164
Reputation: 105
Try the following, the problem you can have is that for clicking the item "mouseover" you have to hover it so it triggers the hovering function first... :
$(document).ready(function () {
$('.mouseover').mouseover(function () {
alert("Entered")
})
});
$('.mouseover').click(function () {
alert("Clicked!")
});
$('.click').click(function () {
alert("Clicked!")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>
Upvotes: 0
Reputation: 1616
You should simply assign another event to your selector. Smth like this:
let $el = $('.mouseover');
$el.on('mouseover', function() {
console.log("Entered");
});
$el.on('mouseleave', function() {
console.log("Leave");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>
Upvotes: 0
Reputation: 2843
No need to write separate functions. You can chain both on one object like this
$('.mouseover').on('mouseover', function() {
console.log("Entered");
}).on('mouseleave', function() {
console.log("Leave");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>
Upvotes: 1