CSS：悬停问题显示元素和背景图像

Question

我有一个问题让悬停在我的项目上工作。我在不同的项目中使用此代码并且工作正常（尽管我没有在该项目中使用背景图像）。我已经尝试修改悬停以在不同的块上访问ID和Class，没有运气。谢谢参观！

这是我的HTML：

<div class="divTableRow">
 <a href="#">
   <div class="divTableCell in-news">
     <h3>In the News</h3>
     <div class="hvr">
       <p>Read about the buzz viveve is creating</p>
     </div>
   </div>
 </a>
 <a href="#">
   <div class="divTableCell" id="investor">
     <h3>Investor News</h3><div class="hvr">
       <p>Read about Viveve's financials</p>
     </div>
   </div>
 </a>
</div>

这是我的CSS：

.in-news {
    background-color: #C4D600;
}

.in-news:hover {
  background-color: none;
  background-image: url(Images\InTheNews.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: top 20px center;
}

#investor {
    background-color: #8999BA;
}

#investor:hover {
    background-color: none;
    background-image: url(images\InvestorNews.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: top 20px center;
}

.divTableCell {
    display: table-cell;
    width: 280px;
    height: 280px;
    float: left;
    position: relative;
    margin: 3px;
}

.hvr {
  display: none;
}

.hvr:hover {
  display:inline;
}

再次感谢。

Answer 1

看起来您缺少图片网址周围的引号。所以它应该是：

background-image: url("images\InvestorNews.png");

代替：

background-image: url(images\InvestorNews.png);

这是一个有效的例子：https://codepen.io/wedgess/pen/YOpBoq