Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.
Related
I found this effect on material.io: https://material.io/gallery/
The Image is fixed and is overwritten by the blackish one, but the z-index must be smaller than it, because the first bg is covering it.
In my pov its only working, when another div, without any opacity, blocks the first image.
Is that somehow possiboe or are they using a different method?
Edit: This is similar to parallax but not exactly parallax. If you inspect the html,you will see that the image/svg section doesn't scroll but the text does. By giving the svg sections different z-index values this is possible. The images are different in different sections, it's just that those are not moving along with text so it appears as if the images are repeating.
I would suggest you to go through their css to get a better understanding.
This effect is called parallax effect.
You can use a library like http://materializecss.com/parallax.html
to create it or you can create your own https://www.w3schools.com/howto/howto_css_parallax.asp
the two graphic elements are position:fixed each row that contains those graphics are incrementally positioned higher in the z-index and they have overflow:hidden set
body {
margin:0;
}
section {
height:100vh; position: relative; overflow:hidden;
}
section div {
position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }
<section class="red">
<div class="blue"></div>
</section>
<section class="blue">
<div class="red"></div>
</section>
simplified example code: https://codepen.io/saetia/pen/mwBypp
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I have a menu with several div. Every div has a 1px left border. On hover, I change the background of the current div, but as you can see with the following JSFiddle, it's ugly that the previous (grey) border is still visible.
I would like to hide it when I'm on the current selected div. Any ideas?
Fiddle
<div id="main_menu">
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
</div>
To make it more clear, from this:
To this:
Possibly without using any JS.
Change your .menu_item hover css to this:
#main_menu .menu_item:hover {
background-color:#00437f;
cursor:pointer;
position:relative;
left:-1px;
}
and to maintain text at its position update below css:
#main_menu .menu_item:hover .link {
color:#fff;
border:0px;
position:relative;
left:1px;
}
I have the following sample code:
<style type="text/css">
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
margin-left:-218px;
margin-top:-110px;
}
</style>
<div class="div_class">
<iframe src="http://www.w3schools.com/" class="iframe_class" />
</div>
In the code above, a div encloses an iframe of which only a part (from position [x=218,y=110]) has to be displayed. As you can see, I have placed height:100% for iframe which means it takes the height of the div. This is where the problem starts. The iframe is cropped. ie. the iframe's right border and bottom border have moved with the repositioning.
What I want: Even after the repositioning of the iframe, I want the right border and the bottom border to coincide with the right border and bottom border of the div respectively. How do I do it?
Note:
http://www.w3schools.com/ is taken just as an example. In my actual code, the iframe source will be decided by a PHP script.
I cannot set the iframe height to 218+document_height_of_iframe_src because as I said the src is dynamically decided by a backend script. So document_height_of_iframe_src will be unknown to me. Same is the case with document_width_of_iframe_src.
I have to accomplish all this without using JavaScript.
Thanks in advance...
Margin and border styles aren't included in an element width/height. So they have their own layout space. To fix it, add a bottom padding to the iframe_class's container (the div_class) like this.
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
/*added to compensate iframe border (top+bottom)*/
padding-bottom:2px;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
/*removed. messed the layout.
margin-left:-218px;
margin-top:-110px;
*/
}
I have been trying to make div the exact same size as an image, but I don't know the aspect ratio of the image and I wish the image to fit the entire height of the webpage.
I have some experimentation at jsfiddle using display:inline-block
http://jsfiddle.net/jxKqp/4/
and while it seems to look ok when the webpage is loaded in chrome, if the webpage is resized, it fails to conform properly.
In firefox it doesn't work at all. Perhaps there's a better way to go about constraining a div to an image?
Here's similar code inline
<!HTML>
<html>
<head>
<style type="text/css">
.background_image {
height:100%;
width:auto;
border: 5px solid #ff0000;
}
body {
overflow:hidden;
}
div.container {
position:relative;
display:inline-block;
border: 5px solid #00ff00;
}
div.inner {
position:absolute;
top:0;bottom:0;left:0;right:0;
border: 5px solid #0000ff;
border-style:groove;
z-index:2;
background:black;
color:white;
opacity:.5
}
</style>
</head>
<body>
<div class="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Henry_ford_1919.jpg/470px-Henry_ford_1919.jpg" class="background_image"/>
<div class="inner">
I want to be same size as the image
</div>
</div>
`
Take out all this stuff:
.background_image {
height:100%;
width:auto;
border: 5px solid #ff0000;
}
body {
overflow:hidden;
}
DEMO
If you want the div to adjust as you resize, I believe you will need JavaScript. You could easily use jQuery's resize() function to do what you're talking about.
I added the following code to your fiddle:
$(document).ready(function(){
$(window).resize(function(){
$('.inner').height($(window).height());
});
});
And that will resize the div to be the height of the window (which will also be the height of the image as you're defining it).
See new fiddle here: http://jsfiddle.net/jxKqp/7/