I'm trying to add a class to a element when mouse hovers over it and then remove it when mouse leaves. It works currently only with giving it direct style in js.
As shown below I tried various ways to do this, all had some problems. Only the direct style change worked. On mouse leave I do the same but remove the class. The mouse over and leave checks canvas element.
poly.on('mouseover', function () {
this.opacity(1);
layer.draw();
$('.' + this.name()).css({ backgroundColor: "#ffcc00" });
//$('.' + this.name()).classList.add("textboxhighlight");
//$('.' + this.name()).className += " textboxhighlight";
//$('.' + this.name()).addClass("textboxhighlight");
//$('.' + this.name()).setAttribute("class", "textboxhighlight");
});
I'm not sure what the problem is as I tired various methods in adding class all of them with different problems. Using just this.addClass wont work as it needs to start with $('.' + this.name()) or nothing works in the code not even forcing the style part. $('.' + this.name()) refers to a class name in element with the same name as poly.
In css:
.textboxhighlight {
background-color: #ffcc00;
}
Thanks for any help.
May be you have to use in your css class background-color: #red !important. See working example here
It would be easier if you provided more code to work with. The example below will illustrate on how to add a class on hover and remove a class on leaving the element.
$('#element').hover(function(e) {
$(this).addClass('selected');
}, function(a) {
$(this).removeClass('selected');
});
.selected {
background-color: green;
}
<div id='element'>
element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Hard to say what is wrong with your code when you don't show the mouseenter/leave parts of your code. But here is an example with classes:
https://codepen.io/andeersg/pen/MOGqPQ
$('.el').mouseenter(function() {
$(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
$(this).removeClass('el-hover');
});
You can use toggleClass on hover event
$(".hoverclass").hover(function () {
$(this).toggleClass("hoverclass_toggle");
});
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.hoverclass_toggle {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1"> <i class="icon"></i>Test</div>
</div>
<div>
Otherwise you can do that type :
$(".hoverclass").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1">
<i class="icon"></i>Test
</div>
</div>
<div>
Related
I have a block which has some data attributes:
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Now I want to use javascript for changing text color on mouseenter and mouseover using my data attributes.
So I have:
$(".my-div").each(function() {
$(this).mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function() {
$(this).css('color', this.dataset.color);
});
});
If I have one div, it's working fine, but if I have another divs with the same class, and I mouseenter and mouseover one div, another divs react too.
What should I do to make it working right, maybe add an index, I don't know.
Can you help me, please?
Thanks in advance. Sorry for my English.
P.S. Don't advise css, for this I must use javascript.
Your code should work by itself but you don't need to loop through each div to check if the mouse has entered or left each div element - it's extremely inefficient.
So remove:
$(".my-div").each(function() {});
Your new code should look like the following:
$(".my-div").mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
$(this).css('color', this.dataset.color);
});
.my-div {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
color: #ff4b4b;
border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Obviously the CSS isn't necessary but I have added it to prove that it works correctly.
Get the target element of the event passed into each handler using $(this):
$(".my-div").each(function() {
$(this).mouseenter(function(e) {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function(e) {
$(this).css('color', this.dataset.color);
});
});
.my-div{
font-size: 20px;
line-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="black" data-hover="red">
Text 1
</div>
<div class="my-div" data-color="black" data-hover="green">
Text 2
</div>
<div class="my-div" data-color="black" data-hover="blue">
Text 3
</div>
I would like to expand a div, filters, when filtertoggle is clicked. I would like to do this by adding the class on to filters. Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters.
Here is the code I have attempted:
jQuery(document).ready(function($) {
$('body').click(function(evt) {
if (evt.target.attr('class').includes('filtertoggle')) {
$(this).toggleClass('on');
$('.filters').slideToggle(200);
return;
} else {
$(this).element.className = element.className.replace(/\bon\b/g, "");
return;
});
As it stands, filters does not open.
Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target.
Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:
$('body').click(function(evt) {
if ($(evt.target).hasClass('filtertoggle')) {
$('.filtertoggle').addClass('on');
$('.filters').slideToggle(200);
} else {
$('.filtertoggle').removeClass('on');
$('.filters').slideUp(200);
}
});
body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:
body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters {
opacity: 0;
transition: opacity 0.3s;
}
.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
When a user mouses over a div it should change to the color red, when they mouse out it should change back to transparent. When they click on the div, it should change to color red.
For some reason, the mouse out event listener is conflicting with the click event listener. Can someone help? When I click on the div, it doesn't change to red.
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
$(this).css('background-color', 'white');
});
div$.on('click', function () {
$(this).css('background-color', 'red');
});
Note, I have to apply a background image dynamically to each element, so using CSS classes to add the background image is out of the question (because I don't know it before hand).
You could set a boolean variable to confirm that the click has occurred and then only run the mouseout code if the variable is false like this:
var is_clicked = false;
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
if(!is_clicked) {
$(this).css('background-color', 'white');
}
});
div$.on('click', function () {
$(this).css('background-color', 'red');
is_clicked = true;
});
Note: For multiple div elements user multiple is_clicked variables
You can always do a CSS implementation with :hover; just make sure to add a specifying class to each element you would like this effect on.
1. :hover and jQuery
var div$ = $('.redHover'); // name the class whatever you like
div$.on('click', function () {
$(this).css('background-color', 'red');
});
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>
2. :hover and vanilla JS
var els = document.querySelectorAll('.redHover');
for (var i = 0; i < els.length; ++i) {
els[i].addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
}
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>
Instead use mouseenter insead of mouseover see why.
The best thing you can go with would be the following notes:
To those elements with hover effect add a class like hoverable.
Hover effect is only applied to those elements having this class.
HTML:
<div class="hoverable"></div>
CSS:
.hoverable:hover{
background-color: red
}
JavaScript:
div$.on('click', function () {
$(this).css('background-color', 'red');
});
In this way, you can simply decide whether an element should be hover-able or not by adding or removing hoverable class. Also hover effect is applied in CSS level not JavaScript, which is more acceptable.
As far as I understand you really want to change picture in the div, not just background color which is relatively easy. Try this:
<div class="hoverable">
<img src="myImg.jpg" />
</div>
//css
.hoverable img{visibility:hidden;}
.hoverable:hover img{visibility:visible;}
.clicked img{visibility:visible!important;}
//JS
$('.hoverable').click(function(){
$(this).addClass('clicked');
});
I'm taking by first babysteps in jQuery and stumbled upon a problem I can't seem to get around.
I couldn't find an article that quite described what my problem was, so I would like to try to get an answer this way.
I don't understand why my objects keep behaving like their former class.
When I setup a hover action for a class, and change the class of the object by clicking, jQuery keeps doing the animation for the new class.
I used toggleClass() and removeClass/ addClasswithout any result:
https://jsfiddle.net/biest9160/f0na6sro/
var wide = function() {
$(this).animate({ 'width': '120px' }, 200);
}
var normal = function() {
$(this).animate({ 'width': '100px' }, 200);
}
$(document).ready(function() {
$('.class1').hover(wide, normal);
$('.class1').click(function() {
$(this).toggleClass('class1 class2');
})
})
div {
width: 100px;
height: 100px;
border: 1px solid #000;
margin: auto;
}
.class2 {
background: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>
I don't understand why the the hover action is triggered while the object has a new class.
Initialy you attach the event to the element with the class name. After the class is changed the event remains on the element.
To remove the event you can use .unbind. To remove .hover event you can check this answer.
A working example using .unbind to remove the event and after to reattach it will look like in the snippet (basically is toggle hover event):
var wide = function(){
$(this).animate({'width':'120px'},200);
}
var normal = function(){
$(this).animate({'width' : '100px'},200);
}
$(document).ready(function(){
$('.class1').hover(wide,normal);
$('.class1').click(function(event){
var $this = $(this);
$this.unbind('mouseenter mouseleave'); // remove hover
if( $this.hasClass('class2'))
{
$this.hover(wide, normal); // reattach hover
}
$this.toggleClass('class1 class2');
})
})
div{
width:100px;
height:100px;
border: 1px solid #000;
margin: auto;
}
.class2{
background: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>
Use .on() menthod to bind the event which will actually bind the event on the parent of the class.
Here is the example:
$(document).on("click", '.class1', function(){
$(this).toggleClass('class1 class2');
});
This will defiantly work...
I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}
Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});
But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});
The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});