悬停时是否可以显示div?为什么我在CSS中的代码无法正常工作?

时间:2018-09-25 09:43:48

标签: html css

这是我的代码,我只是从教程中复制了此代码,然后修改了代码以供使用,但并未显示出我想要的内容,它无法正常工作。 这是我的CSS:

.project-item h3{
	    cursor: pointer;
      }
      #project-contentOne{
	    display: none;
      }
      .project-item :hover #project-contentOne{
	  display: block;
      }
<div class="project-item">
  <h3>University-wide High Spped Information Network</h3>
  <div id="project-contentOne" class="p-content">
    <p>University wide High-Speed Information Network is a 
               component of the 5-year project plan which is the eCLSU. It 
               includes the development, deployment, and acquisition of 
               communication infrastructure.</p>
    <p>This component installs and deploys communication 
               equipment and systems that interconnect the colleges and 
               units within the main campus and the satellite research and 
               laboratory schools and facilities. This infrastructure must 
               be able to support handling large and simultaneous transfer 
               of data between different users across the campus to 
               achieve convenience and efficiency in university 
               operations</p>
  </div>
</div>

我也想在内容中放入图片,所以我使用div 预先谢谢你

1 个答案:

答案 0 :(得分:1)

有一个小错误,请在:hover之前删除空间并完成操作,这是有效的代码段。

.project-item h3{
    cursor: pointer;
  }
  #project-contentOne{
    display: none;
  }
  .project-item:hover #project-contentOne{
  display: block;
  }
<div class="project-item">
            <h3>University-wide High Spped Information Network</h3>
            <div id="project-contentOne" class="p-content">
                <p>University wide High-Speed Information Network is a 
                 component of the 5-year project plan which is the eCLSU. It 
                 includes the development, deployment, and acquisition of 
                 communication infrastructure.</p>
                <p>This component installs and deploys communication 
                 equipment and systems that interconnect the colleges and 
                 units within the main campus and the satellite research and 
                 laboratory schools and facilities. This infrastructure must 
                 be able to support handling large and simultaneous transfer 
                 of data between different users across the campus to 
                 achieve convenience and efficiency in university 
                 operations</p>
            </div>
        </div>