I've been trying to figure this out for a long time and I can't seem to get it. I have the following HTML:
<div class="b">
<button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>
with the corresponding CSS:
.b {
float: right;
display: none;
}
.A {
float: left;
display: inline;
width: 1000px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
}
What I'm trying to do is whenever I hover over A the b div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of A is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?
Relevant JSFiddle: http://jsfiddle.net/sn19k1wz/3/
You can do this by changing position of A and B
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Change the div positions, hovering div tag should be the first one
Like this :
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Demo URL
Try like this: Demo
.A {
display: inline-block;
width: 1000px;
position: relative;
}
.b {
display: none;
position: absolute;
z-index: 999;
right: 0;
top:6px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
background: red;
cursor:pointer;
}
Related
I got two div's and I want to change the color of the first by hovering the second one. I found solutions when the "hovered " come before the objective that its css should be changed, what if the "hovered" come after? What could be done without javascript?
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>
A solution is to inverse the order visually and keep the order in the DOM so that you can still use the + selector.
Here is an example with flex:
.wrapper {
display:flex;
flex-direction:column;
}
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
order:2; /* this will make box-2 goes after */
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box-2"></div>
<div class="box"></div>
</div>
</body>
Some related question to get more ideas:
Is there a "previous sibling" CSS selector?
Previous adjacent sibling selector workaround?
While Temani's answer is a great technique, I have an alternative suggestion if you need this to work both ways, using the :not() selector, though it's a tad bit more hit-or-miss because of your margins.
If you check for the hover on the .wrapper element, you can then style your box when it isn't hovered, like so:
.wrapper:hover > .box:not(:hover) {
background-color: green;
}
Here’s a tricky one…
I have a div, the contents of which should change on hove over on any part of it.
Here’s a pic detailing both wanted states:
And here is best effort, so far:
codepen
..it needs a bit of work.
Any help much appreciated!
Here's the HTML so far:
<div class="item green">
<a href="#">
<h4>Welcome</h4>
<p>Click here to find out more</p>
<img src="http://www.veropixel.com/res01-170w115h.jpg"/>
</a>
</div> <!-- /item -->
So there's my solution http://codepen.io/anon/pen/mIrvA :
$resinGreen: #00a14a;
.green { background: $resinGreen; }
.item {
width: 300px;
margin-bottom: 5px;
a {
display: block;
height: 98px;
overflow: hidden; /* cancels img float */
text-decoration: none;
h4, p {
height: 98px;
line-height: 98px; /* Two lines added to center
vertically text of course you can use display:inline-block
with vertical-align:middle */
padding-left: 15px;
margin:0;
}
img {
float: right;
height: 98px;
}
p {
display: none;
}
&:hover {
h4, img { display: none; }
p { display: block; }
}
}
}
Your problem was that your link haven't a height so it's why it was blinking, i also moved img to the first place for floating
If using just images within the div this bit of jquery will do it:
$('#applyimg').hover(function(){
$(this).attr('src','/design/sendcv_over.png');
},function(){
$(this).attr('src','/design/sendcv.png');
});
HTML
<img id='applyimg' src='/design/sendcv.png'>
Mouseover the image will swop it's source
I'm trying to create the look of a recipe card online:
As such, I am trying to have the underline go the full width of the paragraph, even if the text does not. Right now, I am trying to use text-decoration: underline, but it only extends as long as the text:
HTML:
<div>
<p>Lorem ipsum...</p>
</div>
CSS:
p {
border-bottom: 1px solid #000;
display: inline;
width: 200px;
}
div {
width: 400px;
}
JSFIDDLE: http://jsfiddle.net/FYNAM/1/
Any suggestions?
Stupid solution, but if your line height is the same across all <p> (no nested elements with different line-height) you can use background image.
.rtv {
position: relative;
}
.abs {
position: absolute;
}
.full-underline {
width: 100%;
}
.full-underline span {
display: block;
width: 100%;
height: 20px;
border-bottom: 0.8px solid black;
}
<div class="content tl m20 rtv">
<div class="full-underline abs">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h3>NAMA PEKERJAAN :</h3>
<h1>PEKERJAAN EMERGENCY PEMBERSIHAN BENDA ASING DI TOWER 07 SECTION NGENA-TUBAN</h1>
</div>
enter image description here
You can adjust the span height with the size of the text
You can solve this by modifying what happens after your p tag as follows
p:after {
content: " ______________________________________________";
}
This was a quick down and dirty solution, but I think you'll be smart enough to take it from here ;)
Good luck.. and great question! You had my vote
DEMO
add following to your css:
div { display: block; width: 100%; }
div > p { display: block; width: 100%; }
or, you could also try:
div { width: 100%; }
div > p { display: block; }
*remove width from 'p'
It should solve your issue.
So in FireFox / IE for some reason, my hover keeps blinking, I'm not quite sure why. Is it just better to do my hovers in javascript or is there an easier fix in CSS? Here's a JSFiddle to show what i mean - http://jsfiddle.net/eRBCa/
HTML
<div>
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#div1:hover + #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
It seems (without getting in to much technical details), that the :hover selector works differently in Chrome than in Firefox or IE. Namely, when #div2 gets visible, it becomes the "hovered" element and #div1 loses the 'hover' "attribute" (in FF or IE). That's what causes the flickering.
You could fix that by changing your CSS like this:
#div1:hover + #div2,
#div2:hover {
display: block;
}
See, also, this short demo.
The jitter effect is created because once you display the overlay, your mouse is now hovering the overlay instead of the original (#div1). You can fix this by looking at whether the parent element is hovered instead.
/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
display: block;
}
http://jsfiddle.net/eRBCa/1/
You can do something like this:
http://jsfiddle.net/eRBCa/4/
HTML
<div>
<div id="div1">
<div class="content">
content here
</div>
</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
position:relative;
}
#div1:hover{ background-color:red; }
#div1:hover .content {display:block; }
.content {display:none; position:absolute; top:0; left:0}
You should call action earlier in html.
Once you hover div1, div2 comes on top, so you hover div2 and they are adjacent.
http://jsfiddle.net/GPCh3/
<div id="call">
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#call:hover #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
I want to show second div (in HTML) with class dikha on cursor hover over anchor tag.
HTML CODE:
<a>Hover over me!</a>
<div class="faraz"> sdjfg </div>
<div class="dikha">Stuff shown on hover</div>
STYLE
div {
display: none;
}
a:hover > div:nth-child(2) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Write like this:
a:hover ~ .dikha {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
You need to use the adjacent siblings selector ~. Also, the div you want to show is the third child, not the second (because the <a> is the first).
div {
display: none;
}
a:hover ~ div:nth-child(3) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Demo: http://jsfiddle.net/3eFhf/
you can use javascript function here.
< onmouseover="document.getElementById('myid').style.display='block'">
< id="myid" class="dikha">
Your dikha class should be hidden by default
.dikha { display:none; }
you can also use jquery slidetoggle method to achieve this