koder
August 1, 2016, 9:20am
1
Need to add background for the selected div button, Tried in below way but it is adding to all the identical div buttons and also once clikced unbiding the ‘hover’ method is this correct?
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
$(document).on('click', '.myDiv', function(){
//some task will goes here
$(this).unbind('hover');
}).hover(function(){
$(this).find('.myBtn').css('background','#666666');
});
PaulOB
August 1, 2016, 9:55am
2
Hi,
I’m not sure what your goal is here exactly but the easiest way to change the colour of the clicked element is to add a class and then control the styling through css (as that is csss’s job).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.active .myBtn{background:#666}
</style>
</head>
<body>
<div class="myDiv">
<div class="myBtn">a</div>
</div>
<div class="myDiv">
<div class="myBtn">b</div>
</div>
<div class="myDiv">
<div class="myBtn">c</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(document).on('click', '.myDiv', function(){
//some task will goes here
$(this).addClass('active');
})
</script>
</body>
</html>
Of course I’m guessing that you have more complex requirements than the above
If you only want one button highlighted at a time then just remove the active class from all first.
e.g.
$(document).on('click', '.myDiv', function(){
//some task will goes here
$('.myDiv').removeClass('active');
$(this).addClass('active');
})
koder
August 1, 2016, 12:03pm
3
Thanks for your reply, on hover need to add another class, please see my question once again.
PaulOB
August 1, 2016, 1:10pm
4
Please see my answer
Perhaps if you can explain fully what you are doing here it may help towards a proper solution rather than throwing snippets backwards and forwards.
Why are you adding a class on hover and what element are you adding it to?
At present you are changing the background of all the myBtns when you hover over the body.
Are you removing the background when not hovered?
Why not use CSS for the hover effect?
If you can clarify your intentions we can works towards a solution
Here’s an example that may help with your problem.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.notClicked .myDiv:hover {
background:#666
}
.myBtn {
display:inline-block;
padding:5px 10px;
background:red;
opacity:0.5;
min-width:100px;
margin:10px 0;
}
.notClicked .myDiv:hover .myBtn,
.active .myBtn{opacity:1.0}
</style>
</head>
<body>
<div class="wrap notClicked">
<div class="myDiv">
<div class="myBtn">a</div>
</div>
<div class="myDiv">
<div class="myBtn">b</div>
</div>
<div class="myDiv">
<div class="myBtn">c</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$('body').on('click','.myDiv', function (event) {
$('.wrap').removeClass('notClicked');
$('.myDiv').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
</html>
1 Like
koder
August 2, 2016, 5:16am
5
@PaulOB : Thanks for the code at last fixed the issue based on your workaround…
system
Closed
November 1, 2016, 12:16pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.