css笔记

原创已于 2022-10-24 15:53:20 修改 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2017-02-04 08:41:05 首次发布

本文介绍了一种使用CSS对图片中的热点区域进行定义及美化链接的方法。通过设置特定的CSS样式，可以实现图片上不同区域的交互效果，并在鼠标悬停时改变链接颜色。

css笔记

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.

<!--

body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}  

#pic {
  width: 640px;
  height: 425px;
  position: relative;
}

#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.8em;
}

#pic a {
  text-decoration: none;
  color: #039;
}

#pic a .hotspot {
  width: 100px;
  height: 120px;
  position: absolute;
}

#pic a .link {
  position: absolute;
  display: block;
  width: 15em;
}

/* :BUG: This rule on it's own does not work in IE  */
#pic a:hover .hotspot {
  border: 1px solid #fff;
}

/* :BUG: Neither does this rule  */
#pic a:hover .link {
  color: #0066FF;
}

/* :KLUDGE: However if you add this rule, both the previous rules now work. Weird*/
#pic a:hover {
  border: none;
}


#pic .rich a .hotspot {
  top: 15px;
  left: 95px;
}

#pic .andy a .hotspot {
  top: 115px;
  left: 280px;
}

#pic .jeremy a .hotspot {
  top: 250px;
  left: 425px;
}


#pic .rich a .link {
  bottom: -2em;
  left: 0;
}

#pic .andy a .link {
  bottom: -3.2em;
  left: 0;
}

#pic .jeremy a .link {
  bottom: -4.4em;
  left: 0;
}


-->