Question

我有五个div，每个div都有自己独特的背景图像。每个div内部都是文本链接。将鼠标悬停在任何div或文本链接上应创建翻转效果，交换div的背景。每个div的翻转状态也是唯一的，所以div 1（#colOne）在bgOne.png和bgOne_ro.png之间交替，在bgTwo.png和bgTwo_ro.png等之间交替使用div 2（#colTwo）。

这对CSS很简单，但这里有点复杂。

单击文本链接时，应将其父div的背景更改为bg * _ro.png，以便即使在鼠标关闭时它仍然存在。同时，它应该显示一个隐藏的div，对于该文本链接是唯一的。

这个隐藏的div将有自己的关闭按钮（可能通过显示：隐藏CSS）。关闭它应该使它显示它的文本链接的父div应该将其背景重置为bg * .png。事情现在将像揭露隐藏的div之前那样表现。

由于有五个文本链接，因此可能会显示五个隐藏的div。任何时候都不得泄露一个隐藏的div。单击文本链接应该隐藏当前显示的任何隐藏div，以及显然显示与其关联的div。

我已经包含了一些结构代码，希望有助于使事情变得更清晰。

非常感谢任何帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#333333;
margin: 0px;
padding: 0px;
}
#Container {
width:1000px;
margin:auto;
left:50%;
}
.Column {
width:199px;
height:700px;
float:left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
text-align:center;
}
#colOne {
background-image: url(bgOne.png);
}
#colOne:hover {
background-image: url(bgOne_ro.png);
}
#colTwo {
background-image: url(bgTwo.png);
}
#colTwo:hover {
background-image: url(bgTwo_ro.png);
}
#colThree {
background-image: url(bgThree.png);
}
#colThree:hover {
background-image: url(bgThree_ro.png);
}
#colFour {
background-image: url(bgFour.png);
}
#colFour:hover {
background-image: url(bgFour_ro.png);
}
#colFive {
background-image: url(bgFive.png);
}
#colFive:hover {
background-image: url(bgFive_ro.png);
}
a {
position:relative;
text-align:center;
top:600px;
}
</style>
</head>
<body>
<div id="Container">
  <div class="Column" id="colOne">
    <a>Testing</a>
</div>
  <div class="Column" id="colTwo">
    <a>Testing</a>
</div>
  <div class="Column" id="colThree">
    <a>Testing</a>
</div>
  <div class="Column" id="colFour">
    <a>Testing</a>
</div>
  <div class="Column" id="colFive">
    <a>Testing</a>    
</div>
</div>
</body>
</html>

Answer 1

$('.Column').click(function () {
  $('#Container').css('background-image', $(this).css('background-image'));
});

显示/隐藏多个div并切换父级的背景图像

1 个答案: