Question

当你将鼠标悬停在div上然后在该div上方显示文字时，我正在寻找淡出div的方法。我可以通过多种方式完成淡出;但是，我正在努力寻找一种方法来将淡出与显示附加文本结合起来。就淡出来说，这就是我所拥有的：

HTML

<a href="#">
    <div class="myDiv">Lorem ipsum dolor sit amet</div>
</a>

CSS

.myDiv{
    width: 200px;    
}

.myDiv:hover{
    opacity: .3;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

a{
    text-decoration:none;
    color: #000000;
}

这是一个小提琴：JSFiddle

我希望整个div成为另一个页面的超链接，当用户将鼠标悬停在div上时，主要文本会淡出，并显示“点击此处查看更多”等文字在褪色的文本之上。

提前感谢任何建议。

Answer 1

您可以在div之后设置absolute定位的范围，并将0设置为不透明度，如下所示：

<a href="#"><div class="myDiv">TLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<span style='position:absolute;z-index:999;top:50px;'>Click here For more Details</span>

并在悬停时显示：

.myDiv
    {
    width: 200px;    
    }
span{
    opacity:0;
}
.myDiv:hover 
    {
    opacity: .3;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
.myDiv:hover+span{
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;    
}
}


a
    {
    text-decoration:none;
    color: #000000;
    }

Answer 2

我可以为您提供简单的CSS解决方案。您可以使用~代字号选择器更改悬停时其他元素的属性：

修改后的CSS：

.myDiv
    {
    width: 200px;    
    }

.myDiv:hover ~ a{
    display:block;
    margin-top:-50px;
    color:red;
}
.myDiv:hover  
    {
    opacity: .3;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

a
    {
    text-decoration:none;
    color: #000000;
    display:none;
    }

修改HTML：

<div class="myDiv">TLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<a href="#">
Click To View More!
</a>

更新了小提琴：https://jsfiddle.net/p6go1hdy/5/

Answer 3

您可以使用两个子元素，并在悬停时淡出一个，另一个淡入淡出。

.myDiv {
    width: 200px;
    position: relative;
}
.myDiv > * {  
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
.myDiv .data {
    opacity: 1;
}
.myDiv:hover .data {
    opacity: .1;
}
.subdata {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    font-weight: bold;
}
.myDiv:hover .subdata {
    opacity: 1;
}
a {
    text-decoration:none;
    color: #000000;
}

<a href="#">
    <div class="myDiv">
        <div class="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non tincidunt nulla. Nunc cursus non velit ac commodo. Aliquam rhoncus eros non condimentum volutpat. In eu accumsan eros.</div>
         <div class="subdata">Would you like to know more?</div></div>
</a>

Answer 4

您可以在悬停时控制链接中元素的显示。只需要在翻转时切换现有元素的不透明度。

更新：https://jsfiddle.net/p6go1hdy/2/

HTML：

<a class="link" href="#">
<span>TLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
    <i>Click here to view more</i>
</a>

CSS：

    .link{
    width: 200px;    
    }
   .link i {opacity: 0;
    font-style:normal;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
   .link:hover span
    {
    opacity: .3;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }

   a
    {
    text-decoration:none;
    color: #000000;
    }
.link:hover i {opacity: 1}

Answer 5

好的，我在这里看到的第一个问题是您需要将div替换为span标记用于语义HTML。接下来应该在没有悬停选择器的元素上设置transitions，这样当您悬停进出时，转换仍然适用。查看我创建的 FIDDLE ，以帮助您了解它。

HTML：

<a href="#">
    <span class="mainSpan">Lorem ipsum dolodfsd fs fdsd sd fsd fsdf sdf sdf sd fsdf r sit amet</span>
    <span class="hoverSpan">Click Here</span>
</a>

CSS：

a{
    text-decoration:none;
    color: #000000;
    position: relative;
    width: 200px;    
    display:block;
}
a>span{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

a:hover .mainSpan{
    opacity: .3;
}

.hoverSpan{
    opacity:0;
    font-weight:bold;
    padding:20px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
}

a:hover .hoverSpan{
    opacity: 1;
}

Answer 6

有多种方法可以解决您的问题，我个人更喜欢使用jQuery。当然，如果你更舒服的话，你总是可以实现CSS悬停选择器。我首先重新格式化了你的HTML结构，删除了CSS悬停选择器，只使用了jQuery。在鼠标悬停事件中，文本将淡出，只有超链接可见。一旦用户将鼠标移离文本，鼠标悬停效果就会被禁用。

<div class="myDiv">
        <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua
        </p>
        <a href="#" class="more">
        </a>
</div>

CSS修改：

.myDiv
{
width: 200px;

}


.more{
color:green;
display:block;
}
.more{
position:relative;
text-align:center;
bottom:60px;
z-index:999;
}
.myDiv > p{
z-index:-1;
transition:all 0.5s easeInOut;
-webkit-transition:all 0.7s easeInOut;
-moz-transition:all 0.7s easeInOut;
-ms-transition:all 0.7s easeInOut; 
}

jQuery的：

$("p").mouseover(function(){
   $(this).css('opacity','0.3');
   $(".more").text("click for more").fadeIn('slow');
});
$("p").mouseleave(function(){
   $(this).css('opacity','1');
   $(".more").text("");
})

jsfiddle

悬停时淡化div并在顶部显示其他文本

6 个答案: