悬停时转换背景覆盖

时间:2015-05-29 12:46:34

标签: jquery css css-transitions transition

谷歌搜索了一个小时,无法找到答案。你们其中一个人可以帮我吗? 它主要做我想做的一切,但我想转换叠加层,而不是让它快速进出。我还希望能够在同一个动作中略微缩放图标。如果需要,不仅仅对jquery开放。提前致谢。 附加了代码段。



.leftPanel {
  background-color: #fb5757;
  position: absolute;
  height: 100%;
  width: 50%;
}
.leftPanel:hover {
  background-image: url("http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.rightPanel {
  background-color: #2f2f2f;
  position: absolute;
  height: 100%;
  width: 50%;
  left: 50%;
}
.rightPanel:hover {
  background-image: url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.texts {
  display: inline-block;
}
.texts img {
  display: inline;
  width: 60%;
  margin-top: 45%;
  margin-left: 15%;
}

<div class="leftPanel">
  <div class="texts">
    <a href="#">
      <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Dental_2014_Icon_Small.png">
    </a>

  </div>
</div>
<div class="rightPanel">
  <div class="texts">
    <a href="#">
      <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Engineering_2014_Icon_Small.png" id="dev-text">
    </a>

  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

这可以通过使用伪元素(void boxItemSelected(ItemEvent e){ //Create an iterator to iterate over the boxes Iterator<JComboBox<?>> iterator = boxes.iterator(); while(iterator.hasNext()){ //Get the current instance of comboBox from the list JComboBox<?> current = iterator.next(); //If the box in which the select or de-select //event has occurred is the current comboBox then do nothing. if(e.getSource().equals(current)( continue; } //If the event is select then remove the Item from the //current comboBox else add the Item to the current comboBox. if(e.getStateChange() == ItemEvent.SELECTED){ current.removeItem(e.getItem()); }else{ current.addItem(e.getItem()); } } } while ($row = $result->fetch(PDO::FETCH_ASSOC)) { $values = array(); foreach ($columns as $column) { values[$column] = $row[$column]; } records[] = $values; } )来完成。

相关CSS:

:before

检查:https://jsfiddle.net/lmgonzalves/7pnatg52/2/