假设我想创建一个包含两个鼠标悬停效果的交互式组合照片:
我想要做的与this非常相似(看看地图#2) - 我希望当页面加载并突出显示每个人/显示替代图像时,组合照片全部变暗(例如相同)鼠标悬停时的照片,但有色。
我已经有了带有工具提示的图片地图(请注意areas
在这里并不完全正确,因为我需要使用其他图片。)
答案 0 :(得分:1)
我能够在不使用任何JavaScript的情况下提出解决方案。地图#2示例似乎使用了<dl>
和<dd>
元素,这些元素非常模糊,但我接受了它。我认为你可以用<figure>
和其他更精确的元素做同样的事情。如果您不使用区域,则需要为悬停在其上的每个元素使用不同的“悬停”图像,以便可以处理矩形中的任何重叠区域。
<强> HTML 强>
<dl class="map">
<dd>
<figcaption>
<p>Man 1</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 2</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 3</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 4</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 5</p>
</figcaption>
</dd>
</dl>
<强> CSS 强>
.map {
display: block;
margin: 50px 0px 0px 40px;
padding: 0px;
position: relative;
background: url('map_silhouette_black.png');
width: 600px;
height: 400px;
}
.map dd {
display: block;
margin: 0px;
padding: 0px;
position: absolute;
cursor: pointer;
}
.map dd figcaption {
display: none;
margin: -50px 0px 0px -60px;
padding: 10px;
position: relative;
background: #333;
color: #FFF;
font: 14px sans-serif;
text-align: center;
border-radius: 100%;
width: 120px;
box-sizing: border-box;
}
.map dd figcaption:before {
content: '';
display: block;
position: absolute;
bottom: -15px;
left: 50%;
border: 10px #333 solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
.map dd:hover figcaption {
display: block;
}
.map dd:nth-child(1) {
top: 20px;
left: 20px;
background-position: -20px -20px;
width: 115px;
height: 335px;
}
.map dd:nth-child(2) {
top: 20px;
left: 135px;
background-position: -135px -20px;
width: 115px;
height: 345px;
}
.map dd:nth-child(3) {
top: 5px;
left: 250px;
background-position: -250px -5px;
width: 125px;
height: 385px;
}
.map dd:nth-child(4) {
top: 25px;
left: 360px;
background-position: -360px -25px;
width: 120px;
height: 350px;
}
.map dd:nth-child(5) {
top: 25px;
left: 470px;
background-position: -470px -25px;
width: 110px;
height: 330px;
}
.map dd:nth-child(1):hover {
background-image: url('map_silhouette_color1.png');
}
.map dd:nth-child(2):hover {
background-image: url('map_silhouette_color2.png');
}
.map dd:nth-child(3):hover {
background-image: url('map_silhouette_color3.png');
}
.map dd:nth-child(4):hover {
background-image: url('map_silhouette_color4.png');
}
.map dd:nth-child(5):hover {
background-image: url('map_silhouette_color5.png');
}
答案 1 :(得分:0)
测试此代码:
$(document).ready(function(e) {
$('.wrapper area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
$('.popup').show();
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
$('.popup').hide();
});
});
});