There is my code :
<div class='f-left vignetteFamille box-sizing'>
<div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
<br/><br/><br/><br/>
<img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
</div>
</div>
I want my div contenuVignetteFamille hover the image but this doesn't work and I don't know why
EDIT:
there is my css but I don't know if will help you :
.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}
I'm not sure if I understood your question correctly but I'm assuming you want to highlight the image when hovering the div contenuVignetteFamille?
This can be solved by adding css to the child when hovering the parent, like this:
.contenuVignetteFamille:hover img {
opacity: 0.5;
}
See my fiddle here.
On another note, don't use br tags to get some height on your div, add a height value instead. I've also moved your inline styling to the external one.
Related
Sorry, probably not the best title ever. I'm having trouble with a few things in my code that I'm using to practice html/css.
h1:hover is responding whenever I hover my cursor over anything at the same height as the h1 heading.
I'm also having trouble linking it. See the code below.
<h1>Bing</h1>
I'd also like to know how to target specific things in the HTML code via CSS. For example if I import an image in HTML using IMG how would I edit just that image in CSS?
Thank you.
H1 is a block element, so it spans across total width of the page. To limit this effect, you must apply it a fixed width, or "display:inline-block;"
For the second question, the right code is:
<h1>Bing</h1>
First, h1 by default spans the entire width of the page. Try changing it to an inline-block element like so:
h1 {
display:inline-block;
}
Second, you need to put the a tag inside of your h1 tag and put the text inside of the a in order for it to function as a link.
<h1>Bing</h1>
Third, in order to target specific img elements, you can assign them a class or and id and target the desired one. For example:
HTML
<img id="myImage" src="whatever.jpg"/>
CSS
#myImage {
width: 250px;
}
Your anchor should be inside your h1, then you can apply any hover changes to the anchor:
HTML:
<h1>Bing</h1>
CSS:
h1 > a:hover {
color:#F00;
}
DEMO LINK
As you can see on the link above I am trying to change the image when mouse hover but it's not working atm. What should I change? The parent <div> already has one hover on it.
.preview a img:hover{
background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');
}
You are trying to change the background-image css on an <img> tag.
This will not change the "src" attribute.
in order to do that, you will need a JavaScript solution.
using jQuery:
$(".preview a img").hover(function(){
$(this).attr("src","new-image.jpg")
});
EDIT: if you're using CSS3, and it's ok for you that not all browsers will support it, you can do:
.preview a img:hover{
content:url("new-image.jpg");
}
EDIT 2:
working fiddle - http://jsfiddle.net/j3xDR/
EDIT 3:
due to requests that it will work via a parent div, here is a full example with both options:
http://jsfiddle.net/j3xDR/1/
As Shay Elkayam's answer suggested, you can use the content property in modern browsers to achieve this.
If browser support is a problem, then i suggest using a <div> instead if the <img> tag and change the divs background property on hover.
here's a working fiddle
update:
if you want to change the image on hover of the parent div, modify the css selector as in this working : fiddle
As per the HTML code the CSS is not matching:
using .preview a img will be wrong as you are calling the img tag in side the a tag in your CSS.
However your HTML says that you have img tag inside the div class=preview and a tag is above all.
There are multiple ways to achieve the output. One of the easiest way is as follows:
EDIT: As per the comment the edited script was posted as below:
$(".preview").hover(function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
}, function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")
})
Please jQuery in your HTML and write the above script, if you are not using CSS3.
Fiddle Demo is also modified
You could do the same thing in css as well if you do a little bit of modifications in your css
Check this updated fiddle
http://jsfiddle.net/gw6w9/1/
Here in .preview img rule, I set the height to 45px as well since, the actual image is 200px x 200px and you have set the width as 45px meaning it will scale the height to 45px as well and I set the background-image to the initial image as well. so when it loads the grey image is loaded.
I also modified your rule .preview a img:hover to .preview:hover img because
1) I don't see an a under .preview
2) You hover over the div anyway.
under this rule you can set the background-image to the new url.
Hope this works for you
As per related answers given by others, i have modified a small change without any extra javascript nor css. It works in all versions
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/>
DEMO
http://jsfiddle.net/ssuryar/wcmHu/468/
I'm toying around with the CSS3 transition. I hope my question won't be too much noob and realistic :) Basically, whenever users mouse over some elements, I changed via css the color of the text.
Now the problem I have is that : I have a div box with the name of a product which is included in a span master element, which is also containing other data.
I would like to change the color of my product whenever users are over the master span elements.
In order to be more accurate here is the html code :
<span class="wrapper_productbox">
<img src="P1.jpg" width="210" height="210" alt=""/>
<div class="categoryProductBox">
<div class="product-name">
PRODUCT NAME
</div>
</div></span>
So to sum up I would like to know if there is a way in CSS to change the font color of the product-name a element whenever users mouse over the master wrapper_productbox element or the product-image a element.
Thank you very much for your help :)
Two Choices
Each slightly different.
This will activate hovering over even the white space in the .wrapper_product box (Fiddle Example):
.wrapper_productbox:hover .product-name a {
color: red;
}
This will only activate hovering over the two a tags inside the .wrapper_productbox (Fiddle Example):
a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
color: red;
}
Here's the DEMO Used a bit of Jquery. If you prefer pure css you have to re constructure your html code a little bit and definitely to wrap your section with a div not span because the span will have a very short height and will not respond to your hover even.
$('.wrapper_productbox').hover(
function() {
$('.product-name a').css('color','green');
},function() {
$('.product-name a').css('color','#000');
}
);
I put a Div box in a table cell that should slide up once its hovered over. When I hover over it, it doesn't do anything. I have tried the code below without success.
I also tried the Javascript way which didn't work either.
<td>
Product 1
<div id="p1" class="bottombox"></div></td>
.bodytable td #p1{
bottom:-10px;
}
.bodytable td #p1:hover{
bottom:-130px;
width: 50%
}
Hovering is actually working. Try to give background color to the div and you will see it.
Also if you haven't specified div position as absolute than bottom property will not work like this. Perhaps you wanted to have margin-bottom or padding-bottom?
EXAMPLE HERE
you can´t see what happens on hover because your p1 class is empty.
Try:
<div id="p1" class="bottombox">Product 1</div>
Is this what you're looking for? It uses the height property. http://jsfiddle.net/vBdne/
If you want the hidden to stick, you're gonna want to use javascript.
I have following code:
<div class='parent'>
<div class='left-child"'></div>
<div class="right-child"></div>
</div>
What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.
This might be a simple question as I'have less knowledge of html and css.
I don't want to use any of the java script code.
I want only css and html code for this.
Thanks.
Have a look at:
Demo
The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.
.parent{
display:table;
}
.parent > div {
display:table-cell;
}
DEMO
You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:
http://jsfiddle.net/3MCzm/