I have a parent DIV that contains three other small DIV's. I would like to change the background colors of the three child DIV's when I hover or mouseover the parent DIV. Is it possible to do this in javascript or jquery?
<div id="r1"> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
You don't need to do this with javascript, you can just use CSS
div#r1:hover div.bx{ background-color: red; }
You can do this in CSS as well,
but from what I understand you want to do, this is how you can achieve that in JQuery:
<div id="r1" onmouseover='changeBg(this);' onmouseout='revertBg(this);'> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
<script type='text/javascript'>
function changeBg(div){
$(div).children('.bx').attr('background-color', '#AAAAAA');
}
function revertBg(div){
$(div).children('.bx').attr('background-color', '#BBBBBB');
} <script>
Add this to your javascript:
$('#r1').hover(function(){ $(this).addClass('r1hovered'); });
And add that to your CSS:
.r1hovered .bx { background-color: red; }
Source : http://api.jquery.com/hover/
Related
Change background color on first click (by this keyword ) and after second click background color should change back to that previous color in JavaScript
<div class="tag-box-cover" id="tag_box_cover">`my main heading`
<div class="label-text">Trivandrum</div>`content`
<div class="btn-wrap">`internal div`
<div class="tag-btn">
<a data-id="15" onclick="h_bg_color()" class="tag-anchor add-category-to-setup has-parent">`onclick button`
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
You can simply add a default background color and toggle a CSS class with higher specificity containing another background color on click as shown below:
document.querySelector('#tag_box_cover')
.addEventListener('click', e => {
e.target.classList.toggle('bg-blue');
});
.tag-box-cover {
height: 100px;
width: 100px;
background-color: red;
}
#tag_box_cover.bg-blue {
background-color: blue;
}
<div class="tag-box-cover" id="tag_box_cover"></div>
I've set up a method which when a button is clicked changes it's background colour and resets the colour of the other three buttons. The method for button1 looks like this
<script>
function changeBttn1() {
document.getElementById("bttn1").style.backgroundColor = '#add8e6';
document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
}...
Also I want to be able to make the Div that applies to each button appear and the others hidden with the same button press. The Div uses Class=Collapse which corresponds to Display:None in Bootstrap.css but I want to change it to run from the same method as the buttons. How can I do both events using Css?
Please do it like this very simple and easy
$('.my-btn').on('click',function(){
var colorval=$(this).attr('color');
$('.my-btn').css('background-color', 'grey');
$(this).css('background-color', colorval);
});
button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
<button class="my-btn" color="red">Red</button>
<button class="my-btn" color="green">Green</button>
<button class="my-btn" color="purple">Purple</button>
</div>
How can I change the first color only in CSS linear gradient using Javascript?
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
as you can see I want to change the color "#F6F6F6" only.
the script must be in Javascript not jquery.
Just remove the class from the div and add a new class with the new attributes.
Fiddle : https://jsfiddle.net/reko91/suuwe4wc/4/
I would add another class that applies to all divs, in this case 'divs' and the linearGradient class too.
<div class='divs linearOne'>
</div>
Only added JQuery for button click
var divs = document.getElementsByClassName('divs');
var toggle = false; //used to toggle between
document.getElementById('clickme').addEventListener("click", function (event) {
if(!toggle){
divs[0].classList.remove('linearOne')
divs[0].classList.add('linearTwo');
toggle = true;
} else {
divs[0].classList.add('linearOne')
divs[0].classList.remove('linearTwo');
toggle=false;
}
})
.linearOne {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
.linearTwo {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #000000, #F6F6F6)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='divs linearOne'>
</div>
<button id='clickme'>
Toggle Gradient
</button>
If your <div> has an id, using JavaScript to change the background to (1) another gradient, (2) some color, or (3) no background at all is really as simple as this :
document.getElementById('anotherGradient').style.background = "-webkit-linear-gradient(top, #00E9E9, #F6F600)";
document.getElementById('greyBackground').style.background = "#E9E9E9";
document.getElementById('noBackground').style.background = "none";
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
<div id="anotherGradient">
This DIV should have a different gradient
</div>
<div id="greyBackground">
This DIV should have a grey background but no gradient
</div>
<div id="noBackground">
This DIV should not have any background at all
</div>
<div>
This DIV should have the original gradient
</div>
<div>
This DIV should have the original gradient
</div>
(see also this Fiddle)
I'm wondering how to appropriately write css to do the following, I have the following html code:
<div class="class1">
Hello
<div style="opacity:0" class="class2">
World
</div>
</div>
When I hover over class 1, I want to change class2's opacity to 1. How would I do that? Thanks!
First remove the inline style and create a css rule for class2. Then change the opacity when hovering over class1.
.class2 {
opacity: 0;
}
.class1:hover .class2 {
opacity: 1
}
http://jsfiddle.net/zC8Wc/
edit
The inline style has been removed because you can't override them in your CSS without using the !important rule which you should absolutely try to avoid. Also all your styling should be in stylesheets not in your HTML.
in css:
.class1:hover .class2{
opacity:1;
}
jsfiddle: http://jsfiddle.net/markasoftware/BD66q/
use visibility instead
<div class="class1" onmouseover="show_div()">Hello
<div style="visibility:hidden;" class="class2">
World
</div>
</div>
<script>
function show_div()
{
document.getElementsByClassName("class2")[0].style.visibility="visible"
}
</script>
I am new to jQuery and I have no idea about where to begin with this. On my webpage I have text and I want to put at the top four squares where the user can click on a square and this will change the colour of the text.
I am hoping to make the squares using CSS with the squares being red, yellow, green and black.
From this I need to create a colour picker using jQuery where the user will click a square and this will change the text into the appropriate colour.
http://jsbin.com/emical/1/edit
<div class="picker" data-color="red"></div>
<div class="picker" data-color="green"></div>
<div class="picker" data-color="blue"></div>
<div class="picker" data-color="black"></div>
<div id="test">TEST DIV THAT WILL CHANGE COLOR</div>
...where eg: instead of "red" you can also use HEX: "#f00" or "#ff0000" or "rgb()", "rgba()"... etc etc :)
CSS:
.picker{
cursor:pointer;
margin:3px;
width:30px;
height:30px;
float:left;
}
jQuery:
$('.picker').each(function(){
$(this).css({background: $(this).data('color')}); // set BG color for every element
}).click(function(){
$('#test').css({color: $(this).data('color')}); // change Target's text color on click
});
http://api.jquery.com/each/
http://api.jquery.com/css/
http://api.jquery.com/click/
or like this:
$('.picker').each(function(){
var myColor = $(this).data('color');
$(this).css({background: myColor }).click(function(){
$('#test').css({color: myColor});
});
});