I'm trying to make an image appear when you roll over text on the bottom right side of the screen. How do I get it down there for all screen widths and heights?
您可以在图像上使用固定的位置,并根据需要分配left,top,right或bottom属性,请参见: http : //www.w3schools.com/css/css_positioning.asp 。
This'll work:
<style type="text/css">
img.floating {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<img class="floating" src="url to image" />
:hover
doesn't work for IE6 unless it's being used on a link. Use this.
<style type="text/css">
#myFavoriteFooterImage {
bottom:0px;
right:0px;
position:fixed;
display:none;
}
</style>
<script type="javascript">
document.getElementById("mousyTextFunTime").onmouseover = function(){
document.getElementById("myFavoriteFooterImage").style.display = "";
};
document.getElementById("mousyTextFunTime").onmouseout = function(){
document.getElementById("myFavoriteFooterImage").style.display = "none";
};
</script>
<div id="mousyTextFunTime">Text to mouse over</div>
<img id="myFavoriteFooterImage" />
Create a CSS style for :hover on the text.
<style type="text/css">
#bottom { display:none; }
#text:hover #bottom {
display:block;
position:absolute;
left:0; // how far from the left
bottom:0;
}
</style>
<div id="text>TEXT</div>
<img src="bottomimage.jpg" id="bottom">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.