Question

所以我需要将鼠标悬停在图片上方显示（如果太难，则不必是链接）

HTML

<div id="con">
    <div id="box1">
        <p id="text1">
            <a href="url">DESTINATION</a>SS
        </p>
    </div>

CSS

#con {
width:1024px;
height:670px;
background-color: #161717;
}

#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
margin-left: 120px;
margin-top: 90px;

}

Answer 1

这是你想要实现的目标吗？

WITH CTEQuery (AccountId) AS (
    SELECT TOP 10 AccountId 
    FROM TempAccount
)
SELECT MAX(AccountId) 
FROM CTEQuery

mock -r ${distro}-${arch} --init

Answer 2

#con {
width:1024px;
height:670px;
background-color: #161717;
}

#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
background: #ccc; /*for example*/
margin-left: 120px;
margin-top: 90px;
    
}

#text1{
    opacity: 0;
    transition: all 0.5s;
}
#box1:hover #text1{
    opacity: 1;
}

<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATION</a>SS
</p>
</div>

Answer 3

添加此

#box1 a{display:none;}
#box1:hover a{display:inline;}

link here

或者如果您想要<p>

#box1 #text1{display:none;}
#box1:hover #text1{display:block;}

Answer 4

非常简单的css

#box1 > #text1 {
    display: none;
}

#box1:hover > #text1 {
    display: block;
}

Answer 5

你可以试试这个..

<style>
#con {
width:1024px;
height:670px;
background-color: #161717;

}

#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
margin-left: 120px;
margin-top: 90px;
color:#161717;



}
#con:hover #box1 {

color:white;

}

</style>

你可以做的是检测父母何时悬停，但css效果是针对孩子的

希望这可以提供帮助

将文字显示在悬停

5 个答案: