Question

问题：圆圈悬停时必须显示叠加层。我想用css做这件事。我知道如何在图像悬停时这样做，然后图像获得叠加，但是当圆圈悬停时如何显示图像的叠加？在我的css下面，为了清楚起见，我留下了我的代码的评论。对我来说，即使是javascript或jQuery的解释和示例，如何归档此结果也会很好。

HTML：

<div class="caption">
    <span class="point"></span>
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
</div>

CSS：

.caption {
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
    background: rgba(248, 214, 215, .5);
}
*/

/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
    background: rgba(248, 214, 215, .5);
}

.point {
    position: absolute;
    display: block;
    height: 25px;
    width: 25px;
    border-radius: 30px;
    background-color: black;
}

演示：http://jsfiddle.net/0qgcn2uu/

Answer 1

纯CSS解决方案无jQuery或JavaScript

即使在CSS 3中也无法选择父标记。

正如所提出的那样，是的，可以将xmlDoc = $.parseXML(data); console.log(xmlDoc); //tried this console.log($(xmlDoc).filter(":first")); //tried this $(xmlDoc).find('wfs\\:FeatureCollection').attr('numberOfFeatures');移到外面。看看这里：

.point

工作代码段

<span class="point"></span>
<div class="caption">
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
</div>

.caption {
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
}

.caption::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
background: rgba(248, 214, 215, .5);
}
*/

/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover + .caption::before {
  background: rgba(248, 214, 215, .5);
}

.point {
  position: absolute;
  display: block;
  height: 25px;
  width: 25px;
  border-radius: 30px;
  background-color: black;
  z-index: 1;
}

小提琴：http://jsfiddle.net/0qgcn2uu/3/

注意：只有问题是这一点，请确保将<span class="point"></span> <div class="caption"> <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" /> </div>和.point及其内容同时包含在.caption的内容中，如果您正在使用多个实例。

Answer 2

JavaScript的：

UPDATAE your_db.oc_user SET password='newhash' WHERE username='your_username';

CSS：

$(document).ready(function() {
   $(".point").mouseover(function() {
      $('.caption').addClass('captionHover'); 
   });

   $('.point').mouseleave(function() {
       $('.caption').removeClass('captionHover'); 
   });
});

Working demo.

如何使用css悬停在另一个元素和伪类::之前进行叠加

2 个答案: