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>
Related
I have a series of div's that get loaded dynamically. There ID is set when the page loads, and they all have the same class of "pp-post". When the user hovers over an item with class="pp-post" the 'p' items within that become visible.
I want to add a different animation for each of these 'p' tags when they become visible.
I have minimal experience with JQuery so I am wondering how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags.
As for the animations not sure yet what to use but it could be JQuery animations or maybe use animations.css and add a class to the p tags when visible.
HTML:
<div id="{post_id}" class="pp-post">
<div id="{post_id}" class="pp-post-item">
<p id="{post_id}" class="pp-post-title"></p>
<p id="{post_id}" class="pp-arrow-down"></p>
</div>
</div>
CSS:
.pp-post-title {
visibility: hidden;
}
.pp-arrow-down {
visibility: hidden;
}
.pp-post-item:hover > p {
visibility: visible;
}
how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags
You can use $(this) to get the hovered pp-post.
The code will look like
$('.pp-post').hover(function(){
$(this).animate({
//animation code
});
});
To make p tag visible,
$('pp-post').hover(function(){
$(this).find('p').animate({
//animation code
});
});
Instead of animation function, you can also use certain specific functions like fadeIn
Sample snippet
$(document).ready(function() {
$('.pp-post').hover(function() {
$(this).find('p').fadeIn(2000);
});
});
.pp-post p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
how can I add a class to my html element as a string
like this:
'.step1{transform : translate(10px,10px); transition-duration: 1s;}'
I've tried jquery addClass but it takes only the class name not a string as the whole class.
the problem is i want to generate a class dynamically then remove it using removeClass, if i add it as css it's not possible to remove it easly
This should do the trick. If you hover the second box, the first one moves.
$('.two').mouseenter(function(){
$('.one').addClass('move');
});
$('.two').mouseleave(function(){
$('.one').removeClass('move');
});
.one, .two {
background-color:green;
width:100px;
height:100px;
transition-duration: 1s;
}
.two {
background-color:red;
}
.move {
transform: translate(100px, 100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='one'>
</div>
<div class='two'>
</div>
If you are already using Jquery then use css() function Know more here
i hope it helps.
$(".step1").css({"transform": "translate(10px,10px)", "transition-duration": "1s"});
This might help you, This will not add any class, it will directly add the styling to the div. addClass()/removeClass() will only use for adding/removing the class. The parameter passing inside this will be a class name.
$('.targetDiv').CSS({"transform" : "translate(10px,10px)", "transition-duration": "1s"});
I've added two examples.
One with adding a class to the div and placing the style in it.
or I've added a Jquery function that applies the css to the div without adding a class.
jsfiddle here
$('#add_class').on('click', function(){
$("#my_first_div").addClass("step1");
});
$("#add_css").on('click', function(){
$("#my_first_div").css("transform", "translate(10px,10px)");
$("#my_first_div").css("transition-duration", "1s");
});
$("#reset").on('click', function(){
$("#my_first_div").removeClass("step1");
$("#my_first_div").css("transform", "translate(0px,0px)");
$("#my_first_div").css("transition-duration", "1s");
});
#my_first_div {
color:red;
}
.step1{transform : translate(10px,10px); transition-duration: 1s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="my_first_div">
my div
</div>
<br /><br /><button id="add_class">
add class
</button>
<button id="add_css">
add css
</button>
<button id="reset">
reset
</button>
explanation: with the addClass event a class will be added to the div and applies the style that is in the css documentation addclass
and how to remove the class
With the css event a css style will be applied to the div without setting it in the css you can see an example and documentation here
I want to only resize images that are in a div with a specific class, inside an other div with an other specific class. but the images which are only inside the div which is inside the other div should not be resized.
This works if I want to resize images inside a classed div:
div.classname>img { width:something; }
but this doesn't work:
div.classname2 > div.classname > img { width:something; }
Markup
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But I can't refer to it with the inside class name.
So, to make it really clear, i need to resize these images:
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But not these:
<div class="classname">
<img>
</div>
I feel like your css rule should work
div.classname2 > div.classname > img { width:something; }
Does this fiddle show what you're trying to illustrate? If so, perhaps you just have overriding CSS rules somewhere?
I think this should work
CSS
.classname2 .classname img { width: 200px; }
Having:
<div class="parentDiv">
<img class="img1">
<div class="childDiv">
<img class="img2">
</div>
</div>
do it like this:
.parentDiv > img { width: 100px }
will just effect <img>s having class="img1" not those having class="img2"
Edit the only the single image you want without changing the rest, by going to that specific tag and putting the following style attributes.
<img class = "example" style = "width: 50px !important;">
UPDATE
Give this a try, add "!important" to the inside class to override the parent.
div.classname2 > div.classname > img { width:something !important; }
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/
I have a Div with position:relative which contains "one or more" images inside it with postion:absolute with some top and left values. I need to toggle the position attribute of ALL THE IMAGES at a time between Absolute and Auto/Relative with a button using JS or JQuery.
Is there any way to work with all these child IMAGES at a time?
try the following:
html
<div class="wrapper">
<img src="http://dummyimage.com/15x15/000/fff" class='absPosition'>
</div>
<input type="button" value="change position">
css
.wrapper {
height:300px;
position:relative;
}
.absPosition {
position:absolute;
bottom:0;
}
jQuery
$(":button").click(function() {
$("img").toggleClass("absPosition")
});
Demo: http://jsfiddle.net/ZRDdB/
Just use a jQuery selector which encompasses all of the images within your div. If, for example, your div had an id of "divId" then to set the position to relative of all the images within that div, you would use:
$(document).ready(function() {
$("#button").click(function() {
$("#divId img").css("position", "relative")
});
});
This would be best achieved using both CSS rules (as in CSS rules, not JS assigned inline styles) and jQuery's .toggleClass() method.
If you've got markup like the following:
<div id='foo'>
<img />
<img />
</div>
and CSS like the following:
div#foo { position:relative; }
div#foo img { position:relative; }
div#foo img.absolute { position:absolute; }
You can easily toggle that the IMGs' position rule using something like
$('button').click(function() {
$('div#foo img').toggleClass('absolute');
});