html - 图片的 CSS 问题

Question

制作方法

.l {
  float: left
}
.abs {
  position: absolute
}
.rl {
  position: relative
}
.r {
  float: right
}
.f {
  clear: both
}
.menuItem {
  border-bottom: 1px #ccc solid
}
.menuItem .p {
  padding: 10px 10px;
  font-weight: bold;
  font-size: 12px
}
.menuItem .active {
  color: #333;
  cursor: default
}
.menuItem a {
  display: block;
  text-decoration: none;
  cursor: pointer
}
.menuItem .p:hover {
  background-color: #f5f5f6;
  text-decoration: none
}

<div class='menuItem'>
  <div class='l' style='margin-left:120px'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>
  <div class='f'></div>
</div>

http://jsfiddle.net/AndyPSV/6gh2dfm4/1/

图像在(中心位置).active 下:

(白色背景，与border_bottom一致)

和背景:#fff 当你悬停在 ALL active?

Answer 1

一个简单的解决方案是创建一个三 Angular 形的小图像，并使用类 .active 上的 background css 属性将该图像定位在三 Angular 形的中间底端。将鼠标悬停在 .active 上时，您可以将背景设置为无。例如:

.active {
  background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
  background: none;
}

另一种选择可能是根本不使用图像，而是使用 css 在 :after 选择器中创建一个三 Angular 形。

.l {
  float: left
}
.abs {
  position: absolute
}
.rl {
  position: relative
}
.r {
  float: right
}
.f {
  clear: both
}
.menuItem {
  border-bottom: 1px #ccc solid
}
.menuItem .p {
  padding: 10px 10px;
  font-weight: bold;
  font-size: 12px
}
.menuItem .active {
  color: #333;
  cursor: default
}
.menuItem a {
  display: block;
  text-decoration: none;
  cursor: pointer
}
.menuItem .p:hover {
  background-color: #f5f5f6;
  text-decoration: none
}

.active {
  background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
  background: none;
}

<div class='menuItem'>
  <div class='l' style='margin-left:120px'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>
  <div class='f'></div>
</div>