i have two div . from second div a:hover i want to add opacity on img
<div class="hide">
<img src="/img.png">
</div>
<div class="onhover">
<a class=""onhover_change>
</div>
If anyone have idea let me know.
I am not getting how to apply css on above div
Change Your HTML Like
.wrapper{
display:flex;
flex-direction:column;
}
.onhover{order:1}
.hide{order:0}
.onhover:hover + .hide{
opacity:0.3;
}
<div class="wrapper">
<div class="onhover">
<a class=""onhover_change>dsd</a>
</div>
<div class="hide">
<img src="/img.png">
</div>
</div>
https://jsfiddle.net/lalji1051/w40jxaf5/3/
Related
I'm trying to make a website but ran into a problem. I need to align elements from div boxes to a vertical line. Something like in the picture (don't question my paint skills)
Here's my code:
<div class="main-block">
<div class="sub-block">
<a class="part1">(light gray block)</a>
<a class="part2">(dark gray block)</a>
</div>
</div>
I need to keep the .part1 and .part2 in .sub-block div.
Table layout can do this:
.main-block {
display:table;
}
.sub-block {
display:table-row;
}
.sub-block > * {
display:table-cell;
padding:10px;
}
.part1 {
text-align:right;
}
<div class="main-block">
<div class="sub-block">
<a class="part1">aaa</a>
<a class="part2">bb</a>
</div>
<div class="sub-block">
<a class="part1">a a aaaaa</a>
<a class="part2">b</a>
</div>
<div class="sub-block">
<a class="part1">aaaaaaaaaaaaa</a>
<a class="part2">(dark gray block)</a>
</div>
<div class="sub-block">
<a class="part1">a</a>
<a class="part2">bbbbbbbbbb</a>
</div>
</div>
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.
I have a block:
<div class="block">
<div class="image">
<span class="grow">4</span>
<img src="images/rate_doctor_photo.png">
</div>
<div class="rate" style="background:#00a7ff">
<div class="ln"></div>
<span>Алексей Романов Олегович</span>
</div>
</div>
How shuggle block with class="image" to block with class="rate"
Remark: bloks class="rate" have different height always
Try something like so:
.image,
.rate{
display:inline-block;
vertical-align:bottom;
margin-left:-4px;
}
http://jsfiddle.net/daCrosby/7xjTC/