Question

我在我的网站上工作，在那里我为主页做了一些自定义更改。我只想在用户将鼠标悬停在文本上时显示图像。我对这个主题/编码一般都不了解，所以我很高兴我能够以某种方式使它适用于桌面，但我不知道如何使图像响应。如果有人可以帮我解决这个问题，我真的很感激，到目前为止我能够解决这个问题：

＆＃13;

<script language="Javascript">
function ShowPicture(id,Source) {
    if (Source=="1") {
        if (document.layers) document.layers[''+id+''].visibility = "show"
        else if (document.all) document.all[''+id+''].style.visibility = "visible"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    } else if (Source=="0") {
        if (document.layers) document.layers[''+id+''].visibility = "hide"
        else if (document.all) document.all[''+id+''].style.visibility = "hidden"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
}
</script>

＆＃13;

<style type="text/css">
#Style2 { 
    position: fixed;
    width:650px;
    height:440px;
    top: 110px;
    right: 55px;
    visibility:hidden;	
}

h1 {
    margin-top: 100px;
}
</style>

</style>

<a href="" onMouseOver="ShowPicture('Style2',1)" onMouseOut="ShowPicture('Style2',0)"><h3>a<h3><h4>b<h4></a>
<div id="Style2"><img src="></div>

＆＃13;

Answer 1

使用CSS：

#Style2 > img {
  width: 100%;
}

这将使图像始终适合容器。例如：

function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}

#Style2 { 
    position: fixed;
    width:250px;
    height:440px;
    top: 110px;
    right: 55px;
	visibility:hidden;	
}
h1 {
   margin-top: 100px;
  }

#Style2 > img {
  width: 100%;
}

<a href="http://kirakoroknai.com/project/bock-albus" onMouseOver="ShowPicture('Style2',1)" onMouseOut="ShowPicture('Style2',0)">
  <h3>absence</h3><h4>— visual identity</h4>
</a>

<div id="Style2"><img src="https://i1.wp.com/kirakoroknai.com/wp-content/uploads/2018/02/kira-koroknai-absence-graphic-design-exhibition-identity-13.jpg?fit=2200%2C1760"></div>

Answer 2

我真的没有看到在这种情况下使用JS的意义......你可以用CSS做所有事情（据我了解这个问题）

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- head content -->
        <style>
            #img {
                display: none;
            }
            #link:hover + #img {
                display: block;
            }
        </style>
    </head>
    <body>
        <div id="link">Hover me</div>
        <img id="img" src="http://lorempizza.com/240/240">
    </body>
</html>

＆＃13;

也许这不是你想要的，但我试图帮助;）

如何使图像响应文本悬停

2 个答案: