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

问题描述

我在让悬停在我的项目上工作时遇到问题。我在另一个项目中使用了这段代码并且工作正常（尽管我没有在那个项目中使用背景图像）。我尝试修改悬停以访问单独块上的 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;
}

再次感谢。

标签： hover

看起来您在图像 URL 周围缺少引号。所以应该是：

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

代替：

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

这是一个工作示例：https ://codepen.io/wedgess/pen/YOpBoq

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

问题描述

解决方案

推荐阅读