Question

我为我的网站创建了一个砌石类型的投资组合。现在我只想添加一个悬停效果。（或者我的任务做什么）

我尝试将div不透明度设置为1，并将悬停阶段设置为0.但我不需要隐藏边框。此外，我还需要在悬停div时在中间区域添加一个可点击图标。像这样。

这是我的代码

<a href="#">
 <div class="item i1">
 <img src="/images/epd.jpg" alt="">
 <p class="title">Title</p>
</div>

.item {
    color: white;
    display: table;
    font-size: 1.4em;
    text-align: center;
    width: 295px;
    margin: 5px;
    border: 1px solid #ebebeb;
    opacity: 1;
}

.item:hover {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 0;
}

有什么建议吗？

Answer 1

HTML code ....

   <div id='parent'>
        <div id='child_one'></div>
        <div id='child_two'style="">
            <a href="http://www.google.com">link
            </a>
        </div> 
    </div>

的CSS

        div#parent{width:200px;height:350px;border:1px solid black;position:relative}
        div#child_one{position:absolute;z-index:98;background:red;width:100%;height:100%;}
        div#child_two{z-index:0;position:relative;background:yellow;width:100%;height:100%;}
        div#child_two a{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:30px;height:30px;background:skyblue;}
        div#parent:hover div#child_two{z-index:99}

Answer 2

//这是你问题的例子只是你设置你的图像和它的位置。

$(document).ready(function(){
 $('#anchor').hide();
 $('#imgdiv').mouseover(function(){
 $('#anchor').fadeIn();
 });
  $('#imgdiv').mouseout(function(){
 $('#anchor').fadeOut();
 });
});

.img-div{
  position:relative;
  width:300px;
  height:300px;
  background:#ccc;
}
.img-div .img{
  position:relative;
  width:100%;
  height:100%;
  
}
.img-div #anchor{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:35%;
  border:1px solid;
}
.img-div #anchor img{
  width:100%;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="img-div" id="imgdiv">
 <img src="..img.png" alt="your Image Path Here" class="img"/> 
  <a href="#" id="anchor"><img src="img.jpg" alt="Your Anchor Image Here" /></a>
  </div>

Answer 3

这是另一个逻辑只是使用这个例子。但是你给了两个分区的路径（“imgdiv和imgdiv2”）两者都不同。

$(document).ready(function(){
 $('#layerid').hide();
 $('#imgdiv').mouseover(function(){
 $('#layerid').fadeIn();
 });
 $('#layerid').mouseout(function(){
 $('#anchor').fadeIn();
 });
 $('#close').click(function(){
 $('#layerid').css('display','none');
 $('#imgdiv').css('display','none');
 });
 $('#imgdiv2').mouseout(function(){
   $('#imgdiv').css('display','none');
   $('#imgdiv').fadeIn();
 }); 
});

.img-div{
  position:absolute;
  left:0px;
  top:0px;
  width:300px;
  height:300px;
  background:#ccc;
  z-index:0;
}
.img-div2{
  position:absolute;
  left:0px;
  top:0px;
  width:300px;
  height:300px;
  background:#ccc;
  z-index:-1;
}
.img-div2 .img{
  position:relative;
  width:100%;
  height:100%;
  
}
.img-div .img{
  position:relative;
  width:100%;
  height:100%;
  
}
#anchor{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:35%;
  border:1px solid;
  z-index:3;
}
#anchor img{
  width:100%;
  height:100%;
}
.layer{
  position:absolute;
  left:0px;
  top:0px;
  background:#600;
  opacity:0.5;
  width:100%;
  height:100%;
  border:1px solid;
  z-index:2;
}
#close{
 position:absolute;
 top:0px;
 right:20px;
  color:#fff;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-div" id="imgdiv">
 <img src="..img.png" alt="your Image Path Here" class="img"/> 
  </div>
<div class="img-div2" id="imgdiv2">
 <img src="..img.png" alt="your Image Path Here" class="img"/> 
  </div>
<div class="layer" id="layerid">
  <span id="close">Close&times;</span>
<a href="#" id="anchor"><img src="img.jpg" alt="Your Anchor Image Here" /></a>
</div>

悬停图片并显示图标？

3 个答案: