CSS 基本：悬停

Question

谁能指出悬停不起作用的原因？我设法将背景图像添加到每个锚点元素。但是，代码看起来多余，但如果我尝试将 background-size:cover、background-position: right top 和 background-origin: content-box 移动到 .menu-item class 它就会停止工作。同样在 CSS 的底部，有一个 #ID:hover 似乎不起作用，我不知道为什么，欢迎任何提示:)

#thumb-services {
  width: 100%;
  height: 250px;
}

.menu-item {
  width: 24%;
  height: 100%;
  position: relative;
  float: left;
  margin: 0 0.66666667%;
  cursor: pointer;
}

#thumb-services > a:last-child {
  margin-right: 0;
  float: right;
}

#thumb-services > a:first-child {
  margin-left: 0;
}

#tratamento-imagem {
  background: url('http://lorempixel.com/100/200/sports/1/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#portfolio {
  background: url('http://lorempixel.com/100/200/sports/2/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#fotografia {
  background: url('http://lorempixel.com/100/200/sports/3/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#montagem {
  background: url('http://lorempixel.com/100/200/sports/4/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#tratamento-imagem:hover {
  background: red;
}

<nav id="thumb-services">
  <a id="tratamento-imagem" class="menu-item"></a>
  <a id="portfolio" class="menu-item"></a>
  <a id="fotografia" class="menu-item"></a>
  <a id="montagem" class="menu-item"></a>    
</nav>

Answer 1

与其将图像加载为背景，不如将它们放在页面上并淡出。

.menu-item:hover img {
    opacity: 0;
}

Here's an example

Answer 2

你也可以使用伪元素实现悬停效果：http://jsfiddle.net/mu20eLd1/。（注意：我已经重组了你的一些代码）。

HTML:

<nav id="thumb-services">
    <a></a>  
    <a></a>  
    <a></a>  
    <a></a>
</nav>

CSS:

#thumb-services {
    height: 250px;
}

#thumb-services > a {
    width: 24%;
    height: 100%;
    float: left;
    cursor: pointer;
    position: relative;
    background: url('http://lorempixel.com/100/200/sports/1/') no-repeat top left/cover;
}

#thumb-services > a + a {
    margin-left: 1.32%;
}


#thumb-services > a:nth-of-type(2) {
    background-image: url('http://lorempixel.com/100/200/sports/2/');
}

#thumb-services > a:nth-of-type(3) {
    background-image: url('http://lorempixel.com/100/200/sports/3/');
}

#thumb-services > a:nth-of-type(4) {
    background-image: url('http://lorempixel.com/100/200/sports/4/');
}

#thumb-services > a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 10%, 20%, 0.7);
    display: none;
}

#thumb-services > a:hover:before {
    display: block;
}

CSS 基本：悬停

CSS Basic :hover

html

css

hover