CSS: проблема наведения при отображении элементов и фоновых изображений - PullRequest
Новая
       6

CSS: проблема наведения при отображении элементов и фоновых изображений

0 голосов
/ 30 августа 2018

У меня проблема с наведением указателя мыши на работу над моим проектом. Я использовал этот код в другом проекте и работал нормально (хотя я не использовал фоновое изображение в этом проекте). Я попытался изменить наведение для доступа к идентификатору и классу на отдельных блоках, но не повезло. Спасибо, что заглянули!

Вот мой 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;
}

Еще раз спасибо.

1 Ответ

0 голосов
/ 30 августа 2018

Похоже, вам не хватает кавычек вокруг URL изображений. Так и должно быть:

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

вместо:

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

Вот рабочий пример: https://codepen.io/wedgess/pen/YOpBoq

...