Day12 hover应用(一)

虽然与网页互动的过程会花费更多的时间，但它却是吸引人很重要的一项因素，因此在设计部落格版面的时候，有很多人喜欢加入一些互动式的讯息，在设计CSS时，最常用到的属性就 hover，让我觉得非常好用且很容易上手，简单来说，hover是在控制当滑鼠移至某元件时，某元件该如何反应，以下将介绍CSS中有用到hover属性的地方~

hover + a 超连结应用

这是 hover 常被使用的地方，当滑鼠移至超连结时，不论是文字变色、位移、换背景都是利用 hover 达到。
以下的CSS程序码范例是滑鼠移至网志标题时，网志标题颜色变成桃红色并且往右下位移

#banner h1 a:hover{
color: #fc3a63;
position: relative;
top: 1px;
left: 1px;
}

hover + background 背景变化

• 让滑鼠所在的区域与其他区域有所区隔，比较容易找到滑鼠位置，

.article-head{
background: #ccc;  /* 原本的背景颜色 */
}
.article:hover .article-head{
background: #aaa;  /* 当滑鼠经过时，背景颜色改变 */
}

采用.article:hover/.article-head 而不是.article-head:hover的原因是希望滑鼠移至该文章任何区块，背景都能有变化，若只定义在.article-head:hover的话，滑鼠移至文章标题那个灰色区块背景才会变化，若移至图片就不会变化

• 除了背影颜色外，背景图案也可以变化，以下范例是将连结文字前方加一个小图，滑鼠经过时小图会变换

.title h2{
background: url(灰色爱心的icon) top left no-repeat;  /* 滑鼠未移至文章时的icon */
padding-left: 14px;  /* 每篇文章标题前都有一个小图，利用padding让文字往後移，不要遮住图 */
}
.article:hover .title h2{
background: url(红色爱心的icon) top left no-repeat;  /* 滑鼠移至文章时的icon */
}

hover + display 显示

• 滑鼠移至某区块时，出现原本没有的文字或图片提醒读者

.more a{  /* 因为继续阅读是个超连结，要用a来定义 */
display: none;  /* 平常设定不要显示 */
}
.article:hover .more a{
display: block;  /* 当滑鼠移至该篇文章时，设定以block显示，可设定超连结以一个区块显示 */
width: 150px;  /* 设定长与宽 */
height: 150px;
background: url(image url) center center no-repeat;  /* 设定背景 */
position: absolute;  /* 将继续阅读的位置放置於文章左上角，top=0, left=0 */
top: 0px;
left: 0px;
font-size: 0px;  /* 不要文字出现，因为设定背景来显示 */
}

• 下拉式选单

#links-row-2 .box-text{
display: none;  /* 平常设定不要显示 */
}
#links-row-2 .box:hover .box-text{
display: block;  /* 当滑鼠移至该元件时，才会显示 */
}

要注意不可以写成 #links-row-2 .box-title:hover .box-text ，CSS的写法要考虑到层级问题，因为 box-text 是包含在 box 里面，但不是包含在 box-title 里面。