Search code examples
htmlcsshoverchildren

I am trying to create an effect that when I hover into a div it would then effect all the children

I'm really new to HTML and CSS, I've been picking it up along the way as I've been creating my website. It's been going pretty well up until my portfolio page, what my problem is I've created a portfolio home page which shows all of my work with a title and a short description of the project, I have styled the CSS to change the image on hover to light up (using a spite sheet and moving the position of the image) and the title to turn blue as well as the description, my problem is that I want all of these elements or children of the section to activate at the same time when the mouse is hovered into the section, at the moment the hover effect only works when you hover over each child.

I have looked for ages for a solution but can't seem to find any, I would really appreciate some help with this problem, it is probably a really simple fix but I'm very new to web development so I'm stuck!

Here is my HTML for the section

`<section id="port1">
<a href="tempura.html">
<div id="image1"></div>
<h3>TEMPURA</h3>
<p>Branding project incorporating the japanese culture and an animal as the key elements to       represent the brand.</p>
</a>
</section>`

and here is the CSS

`#port1 {
width:247px;
height:280px;
float:left;
background-color:#FFF;
text-decoration:none;

}

#port1 a {
text-decoration:none;

}

#image1 {
height:150px;
width:227px;
background-image:url(../images/Tempuraimg.jpg);
background-position:top left;
margin:10px;
float:left;

}

#image1:hover {
background-position:bottom left;

}

#port1 h3 {
font-size:10pt; 
font-family:"Helvetica", Arial, sans-serif;
font-weight:bold;
color:#333;
margin-left:10px;
margin-right:10px;
padding-bottom:5px;
padding-top:5px;
border-bottom:1px dotted #999;
text-decoration:none;

}

#port1 h3:hover {
color:#09F;

}

#port1 p {
font-size:8pt;  
font-family:"Helvetica", Arial, sans-serif;
font-weight:200;
color:#999;
padding-top:10px;
margin-left:10px;
margin-right:10px;
text-decoration:none;

}

#port1 p:hover {
color:#0099FF;

}`

Finally this is my website so far and the page is question is the portfolio page here is the link

http://mattwilsongraphicdesigns.co.uk/portfolio.html

If you think you can help me out I'd be very grateful

Best wishes

Matt Wilson

Solution

  • Give :hover to the parent & change his child's style according to them. Write like this:

    #port1:hover p,
#port1:hover h3{
 color:#0099FF;
}

#port1:hover #image1{
 background-position:bottom left;
}