如果包含图像，为什么悬停操作在 Firefox、Chrome 和 Safari 中不起作用？

发布于 2024-10-07 20:12:42 字数 1868 浏览 6 评论 0原文

这是 html 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>my hover test page</title>


  <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>



  <ul id="first_tabs">

 <li><a href="home.html">STARTSEITE</a></li>

 <li><a href="services.html">KONTACT</a></li>

 <li><a href="products.html">UBERSICHT</a></li>

 <li><a href="support.html">MITGLIED WERDEN</a></li>

</ul>

<div id="main_pic"><img src="img/main_pic.jpg"> </div>

  </body>
</html>

css 是：

/* CSS Document */


* {
 margin:0;
 padding:0;
 border:0;
}


#test{
font-color:#FFFFF ;
display:block;
width:20px;
height:20px;
border:2px;

}
#test:hover{

font-color:#1965a7;

}


#first_tabs{
position:relative;
margin-left:470px;
margin-top:45px;
width:450px;
font-family: "Trebuchet MS";

}


#first_tabs li,  #second_tabs li {
  color:#FF0000;
  display:block;
  float:left;
  margin-left:1px;
  border:1px solid #eerrrr  ;
 }

 #first_tabs a, #second_tabs a {
  display:block;
  padding:5px;
  padding-left:11px;
  padding-right:11px;
  text-decoration:none;
  background-color:#d0dee8;
  color:#009;
  font-size:10px;
  text-align:center;

 }




 #first_tabs a:hover, #second_tabs  a:hover {
  background-color:#009;
  color:#fff;
 }


 #main_pic{
position:relative;
margin-top:40px;
margin-left:103px;



}

如果我从 css 文件中省略 main_pic 部分，则悬停有效，但如果我不省略，则悬停在 Firefox、Chrome 和 Safari 中不起作用。请帮忙。

我需要尽快。

伊斯蒂亚克·艾哈迈德

原文

this is the html code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>my hover test page</title>


  <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>



  <ul id="first_tabs">

 <li><a href="home.html">STARTSEITE</a></li>

 <li><a href="services.html">KONTACT</a></li>

 <li><a href="products.html">UBERSICHT</a></li>

 <li><a href="support.html">MITGLIED WERDEN</a></li>

</ul>

<div id="main_pic"><img src="img/main_pic.jpg"> </div>

  </body>
</html>

And the csss is:

/* CSS Document */


* {
 margin:0;
 padding:0;
 border:0;
}


#test{
font-color:#FFFFF ;
display:block;
width:20px;
height:20px;
border:2px;

}
#test:hover{

font-color:#1965a7;

}


#first_tabs{
position:relative;
margin-left:470px;
margin-top:45px;
width:450px;
font-family: "Trebuchet MS";

}


#first_tabs li,  #second_tabs li {
  color:#FF0000;
  display:block;
  float:left;
  margin-left:1px;
  border:1px solid #eerrrr  ;
 }

 #first_tabs a, #second_tabs a {
  display:block;
  padding:5px;
  padding-left:11px;
  padding-right:11px;
  text-decoration:none;
  background-color:#d0dee8;
  color:#009;
  font-size:10px;
  text-align:center;

 }




 #first_tabs a:hover, #second_tabs  a:hover {
  background-color:#009;
  color:#fff;
 }


 #main_pic{
position:relative;
margin-top:40px;
margin-left:103px;



}

if I omit the main_pic part from the css file, then the hover works, but if i dont omit, hover doesn't work in Firefox, Chrome and Safari. Please help.

I need it ASAP.

Istiaque Ahmed

分享到QQ

分享到微博