[英]CSS Hover to change other elements
I have this navigation bar which I have done in CSS, I would like it so when I hover over one of the 3 navigation icons it will change the main image background position. 我有这个导航栏,我在CSS中做过,我希望如此,当我将鼠标悬停在3个导航图标中的一个上时,它将改变主图像背景位置。
I've tried a few ways but not managed to get them to work properly. 我尝试过几种方法,但没有设法让它们正常工作。
CSS CSS
/* Nav Button 1 */
.nav1 {
float:left;
padding-top:20px;
border:none;
outline:none;
}
#nav1
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav1:hover
{
background-position: 0 -107px;
}
/* Nav Button 2 */
.nav2 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav2
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav2:hover
{
background-position: 0 -107px;
}
/* Nav Button 3 */
.nav3 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav3
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav3:hover
{
background-position: 0 -107px;
}
/* Nav Name */
.navname {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#navname
{
display: block;
width: 228px;
height: 81px;
background: url("images/blank.png") no-repeat 0 0;
}
HTML HTML
<div id="navigation">
<div class="nav1">
<a id="nav1" href="#"></a>
</div>
<div class="nav2">
<a id="nav2" href="#"></a>
</div>
<div class="nav3">
<a id="nav3" href="#"></a>
</div>
<div class="navname"><a id="navname" href="#"></a>
</div>
</div>
Any ideas how this can be done? 有什么想法可以做到这一点? The 'navname' element is background position I want to change when hovering over either nav1, nav2, nav3.
'navname'元素是我想要在将鼠标悬停在nav1,nav2,nav3上时要更改的背景位置。
Thanks :D 感谢:D
This is quite simple using jQuery: 使用jQuery非常简单:
$('element-to-initiate-change').hover(function(){
//this will happen when your mouse moves over the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
},function(){
//this is what will happen when you take your mouse off the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
});
Here is an example: http://jsfiddle.net/dLbDF/258/ 这是一个例子: http : //jsfiddle.net/dLbDF/258/
If you made a jsfiddle using your code, I would've done this to your code so you could see clearer. 如果您使用代码制作了一个jsfiddle,我会对您的代码执行此操作,以便您可以看到更清晰。 Always use jsfiddle or some other kind of example when asking a question.
在提问时总是使用jsfiddle或其他一些例子。
Old question but here's a possible CSS-only solution for others who come across it. 老问题,但这里是一个可能的CSS解决方案,其他人遇到它。
https://jsfiddle.net/Hastig/ancwqda3/ https://jsfiddle.net/Hastig/ancwqda3/
html HTML
<div id="navigation">
<a class="nav n1" href="#"></a>
<a class="nav n2" href="#"></a>
<a class="nav n3" href="#"></a>
<a class="title t0" href="#"></a>
<a class="title t1" href="#">one</a>
<a class="title t2" href="#">two</a>
<a class="title t3" href="#">three</a>
</div>
css CSS
.nav {
display: inline-block;
float: left;
padding-top: 0px;
width: 92px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/triangle.png") no-repeat 0 0;
}
.nav:hover {
background-position: 0 -107px;
}
.title {
width: 228px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/blank.png") no-repeat 0 0;
color: red; font-weight: bold;
text-decoration: none;
font-size: 40px; line-height: 107px;
text-align: center;
}
.t0 {
display: inline-block;
}
.t1, .t2, .t3 {
display: none;
}
.nav:hover ~ .t0 {
display: none;
}
.n1:hover ~ .t1, .n2:hover ~ .t2, .n3:hover ~ .t3 {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.