Question

所以我有一个网站，当箭头悬停在光标上时会显示标题，但是在移动设备上它不能很好地工作。

我想知道是否可以在较小的设备上显示标题？我可以使用CSS隐藏箭头但是在页面加载时触发悬停事件吗？

理想情况下，我需要为480px左右的屏幕执行此操作，因为这些是悬停时有大多数问题被点击。

标题是非常简单的代码;

     <header id="header" role="banner">
<center id="showHeader">
<img src="http://outside.hobhob.uk/test/img/a.jpg">
      <div class="headwidth">
            <h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
            </h1> 
          <nav id="main-nav">
        <a href="index.html">Work</a>
        <a href="about.html">About</a>
        <a href="testimonials.html">Testimonials</a>
        <a href="contact.html">Contact</a>
        </nav>  

</center> 
    </header>

我的CSS;

    header .container{
        position:relative !important;
    }
    center#showHeader:hover > .headwidth {
     height: 180px;
     width: 100%;
    }


    .headwidth {
    max-width: 1000px;
    width: 100%;
    position: relative;
    margin:0 auto;
    background-color: #ffffff;
    display: block;
        transition: .7s;
        height: 0px;
        overflow: hidden;
}

Website Example

Answer 1

[编辑]

以下代码将解决您的问题：

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}

查看此CloudMonix以获取直观表示（尝试将屏幕推至宽度小于 480px ）。

<强>段：

＆＃13;

header .container {
  position: relative !important;
}

center#showHeader:hover > .headwidth {
  height: 180px;
  width: 100%;
}

.headwidth {
  max-width: 1000px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  background-color: #ffffff;
  display: block;
  transition: .7s;
  height: 0px;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}

＆＃13;

<header id="header" role="banner">
  <center id="showHeader">
    <img src="http://outside.hobhob.uk/test/img/a.jpg">
    <div class="headwidth">
      <h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
            </h1>
      <nav id="main-nav">
        <a href="index.html">Work</a>
        <a href="about.html">About</a>
        <a href="testimonials.html">Testimonials</a>
        <a href="contact.html">Contact</a>
      </nav>
    </div>
  </center>
</header>

＆＃13;

[INITIAL ANSWER]

您可以在CSS中使用 @media 查询，以使您的网站具有可扩展性和响应性。 使用媒体查询的方法很多，但我喜欢这样使用它们：

.element {
    /* The code to be used for this element in general */
}

@media screen and (min-width: 1300px) {
    .element {
        /* The code to be used for this element in devices wider than 1300px */
    }
}

以上示例可以根据用户设备屏幕的最小width显示不同尺寸的不同内容。

请务必查看这些页面，了解与正确使用媒体查询相关的信息以及易于理解的示例：

隐藏标题仅显示在较小的屏幕上

1 个答案:

[编辑]

[INITIAL ANSWER]