1

我对 HTML 和 CSS 真的很陌生，我在创建网站的过程中一直在学习它。在我的作品集页面之前一直进展顺利，我的问题是我创建了一个作品集主页，其中显示了我的所有作品，并带有标题和项目的简短描述，我设置了 CSS 样式以更改图像悬停点亮（使用恶意表并移动图像的位置）和标题变成蓝色以及描述，我的问题是我希望该部分的所有这些元素或子项同时激活当鼠标悬停在该部分时，目前悬停效果仅在您将鼠标悬停在每个孩子上时才有效。

我已经寻找了很长时间的解决方案，但似乎找不到任何解决方案，我真的很感激这个问题的一些帮助，这可能是一个非常简单的解决方案，但我对 Web 开发非常陌生，所以我被困住了！

这是我的部分 HTML

`<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>`

这是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;

}`

最后这是我的网站到目前为止，页面是问题是投资组合页面这里是链接

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

如果您认为您可以帮助我，我将不胜感激

最良好的祝愿

马特·威尔逊

4

2 回答 2

1

给:hover给父母并child's根据他们改变他的风格。像这样写：

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

#port1:hover #image1{
 background-position:bottom left;
}
于 2012-08-28T11:29:34.067 回答
0

你这样做的方式并不是说实话的最佳方式，因为你使用了太多的 ID。您可以简单地使用类而不是 ID... 而不是 port1、port2、port3 ... 并一遍又一遍地重写相同的规则，您可以简单地使用 class="port"。CSS 是关于编写可反复使用的可重用规则的工作量和工作量。

你应该阅读更多关于 CSS 的内容。我建议您查看HTML Dog 上的 CSS Beginner Tutorials

无论如何，这就是如何实现您想要做的事情。这将适用于除 IE6 之外的所有浏览器，因为它无法识别 :hover 除了锚元素

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

#wrapper #image1{
    background-position:bottom left;
}

或者，您可以使用此选择器让图像容器使用一次，而不是 #image1、#image2 ... 等

div[id^=image] {
    background-position:bottom left;
}
于 2012-08-28T11:25:18.780 回答