I have a strange behavior in HTML + CSS: When I hover the picture it move a little (both in Chrome and ie 10). If the picture is in the top, it doesn't occuer.
This is very simple code, so I don't know what to do.
With this CSS:
div.effect img.image {
/*type your css here which you want to use for both*/
}
div:hover.effect img.image {
display: none;
}
div.effect img.hover {
display: none;
}
div:hover.effect img.hover {
display: block;
}
And this HTML:
<div class="effect" style="position: absolute; bottom:15px;right:135px;" title="Update from us">
<img class="image" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
<img class="image hover" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</div>
You can see here in: http://jsfiddle.net/LmMSH/
Thanks in advance!
Add this to your css:
div.effect img.image {
/*type your css here which you want to use for both*/
display: block;
}
See it here: http://jsfiddle.net/LmMSH/2/
EDIT:
If you want to change pictures when user hover on div use this css:
img.image{
display: block;
}
img.hover{
display: none;
}
div.effect:hover img.image {
display: none;
}
div.effect:hover img.hover {
display:block;
}
http://jsfiddle.net/LmMSH/11/
Try this:
div.effect img.image {
float: left;
}
Give this CSS too
div{height:60px}
Related
I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...
Here is the HTML code:
<section id="parts" class="two-parts">
<div id="partOne">...</div>
<div id="partTwo">...</div>
<div id="partThree">...</div>
</section>
Here is the SCSS code:
#partThree{
display: block;
.two-parts &{
display: none;
}
}
I want to hide #partThree div, when #parts div has .two-parts class.
Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:
.two-parts body #parts #partThree {
display: none;
}
It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?
As I have answered in your other post:
It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:
#partThree{
display: block;
}
&.two-parts #partThree {
display: none;
}
The & takes EVERYTHING before the current line. So if your final SCSS is:
body {
#parts {
#partThree {
display: block;
.two-parts & {
display: none;
}
}
}
}
Then the & will add .two-parts before everything else, and make it:
.two-parts body #parts #partThree {
display: none;
}
The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>
<section id="parts">
<div id="partOne">...</div>
<div id="partTwo" class="two-parts">...</div>
<div id="partThree">...</div>
</section>
this will only work if #partThree and .two-parts siblings and .two-parts comes before.
I have the following issue.
In a demo part I have the code below:
<style>
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>
<div class="manImgA">
<img src="url-to-image-1">
</div>
<div class="manImgB">
<img src="url-to-image-2">
</div>
<div class="manImgC">
<img src="url-to-image-3">
</div>
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.
But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.
Maybe this is what you are looking for?
Anyway siblings selector is for element that come after not before.
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
<div class="manImgA">
<img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>
<div class="manImgB">
<img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>
<div class="manImgC">
<img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>
If you want only with pure css,you must change pure css:
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>
<p class="text prijsb">Big size</p>
<div class="manImgB">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>
<p class="text prijsc">Very big size</p>
<div class="manImgC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>
The tilde ~ targets siblings which follow in the HTML markup order...
A ~ B = target B if and only if it follows A
To employ this feature of CSS in your example use something like this in your stylesheet...
/* hide all divs with a class
which begins with 'manImg' */
div[class^=manImg] {
display:none;
}
/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
display:block;
}
Hope that helped. :)
I tried to display a picture when you hover on a span-tag. I looked it up on the internet, but what I found didn't work. I now ended up with this code:
<span style="display:inline-block;">
<img class="manImg" src="_src/mypicture.jpg">
</span>
...and the question is where to put the 'hoverable' text. When I hover on that text it will show the image.
img { display: none; }
.parent:hover img { display: block; }
Example
You can do this by css only.
<span class="container">
<p class="hover-text">Hover text here</p>
<img class="manImg" src="_src/mypicture.jpg">
</span>
.container {
display: inline-block;
}
.manImg {
display: none;
}
.hover-text:hover ~ .manImg {
display: block;
}
You can do it using JavaScript on onmouseover event.
<span style="display:inline-block;" onmouseover="your javascript code">
Here is one way you can do it:
function mouseIn() {
$('.img').addClass('show');
}
function mouseOut() {
$('.img').removeClass('show');
}
$('.hover-me').hover(mouseIn, mouseOut);
.img {
display: none;
}
.img.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
<p class="hover-me">hi</p>
<img src="http://static.ddmcdn.com/en-us/apl/breedselector/images/breed-selector/dogs/breeds/australian-shepherd_01_sm.jpg" class="img">
</span>
This takes advantage of JQuery's hover. The image is hidden by default. When your mouse hovers over the text, I add a class to show the image. When your mouse stops hovering, I remove the class to hide the image again.
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
I have a class rightband, which is inside of a message class. Sometimes, the parent <div class="message"> has an id subnote, sometimes - not. The code is below:
<div class="message">
<div class="rightband">
<img id="img-up" src="arrow-up.png")" />
<img id="img-down" src="arrow-down.png")" />
</div>
</div>
<div id="subnode" class="message">
<div class="rightband">
<img id="img-up" src="arrow-up.png")" />
<img id="img-down" src="arrow-down.png")" />
</div>
</div>
In my CSS, for particular reasons I need to have the child class rightband formatted to change on hover and not the parent class.
#img-up, #img-down {
display: none;
}
#subnode .rightband:hover #img-up {
display: block;
}
:not(#subnode) .rightband:hover #img-down {
display: block;
}
On .rightband:hover I need to show the #img-up when there is an id="subnode" in the parent and show #img-down when the parent does not have the subnode.
Can this be done in CSS and how?
Try something like:
#img-up, #img-down {
display: none;
}
.rightband:hover #img-down {
display: block;
}
.rightband:hover #img-up {
display: none;
}
#subnode .rightband:hover #img-up {
display: block;
}
#subnode .rightband:hover #img-down {
display: none;
}