Question

我在将鼠标悬停到我的项目上时遇到问题。我在另一个项目中使用了此代码，并且运行良好（尽管我没有在该项目中使用背景图片）。香港专业教育学院试图修改悬停以访问ID和类在单独的块上，没有运气。感谢您的关注！

这是我的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

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

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

代替：

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

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

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

1 个答案: