时间戳

首页 > 解决方案 > 在手机和平​​板电脑上查看时，如何更改元素上的悬停并使其可点击（但具有类似的功能）

html - 在手机和平​​板电脑上查看时，如何更改元素上的悬停并使其可点击（但具有类似的功能）

问题描述

我有以下 HTML 和 CSS 代码，当将五张卡片悬停在它们上方时，它们会进行变换。现在，当在 iPhone XR 等手机上查看时，悬停效果消失了。

因此，我选择使元素可点击以提供相同的功能。我希望用户单击/点击这些卡片以查看我在其中设置的描述。

在查看和使用其他类似 Stack Overflow 帖子上的方法后，我仍然无法解决问题。

main .project1 {
  min-height: 2200px;
  background: black;
  border-radius: 1.2%;
  border: 1px solid;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

main .project1 h4 {
  padding-top: 12px;
  padding-left: 12px;
  color: white;
  font-family: 'Recursive', sans-serif;
  font-size: 120px;
  font-style: italic;
  justify-content: center;
  display: flex;
  align-items: center;
}

.my-flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: .5em;
  height: 120vh;
  justify-content: space-evenly;
}

.my-flex-container .card {
  margin: 120px;
  font-weight: bold;
  position: relative;
  width: 100px;
  height: 50vh;
  flex: 1 1 auto;
}

.my-flex-container .card a {
  padding: 30px;
  width: 100%;
  height: 400px;
  border: 2px solid black;
  background: white;
  text-decoration: none;
  color: black;
  display: block;
  transition: 0.25s ease;
}


/* Tried to have the :active functionality which was stated in other StackOverflow posts. This does not help with the hover effect and does not make it clickable too; the card now behaves weirdly on small devices by transitioning only for a second or two on touch. */

.my-flex-container .card a:hover,
.my-flex-container .card a:active {
  transform: translate(-30px, -30px);
}

.my-flex-container .card a:hover .card--display,
.my-flex-container .card a:active .card--display {
  display: none;
}

.my-flex-container .card a:hover .card--hover,
.my-flex-container .card a:active .card--hover {
  display: block;
}

.my-flex-container .card a .card--display i {
  font-size: 60px;
  margin-top: 200px;
}

.my-flex-container .card a .card--display h2 {
  margin: 20px 0 0;
}

.my-flex-container .card a .card--hover {
  display: none;
}

.my-flex-container .card a .card--hover h2 {
  margin: 20px 0;
}

.my-flex-container .card a .card--hover p {
  font-weight: normal;
  line-height: 1.5;
}

.my-flex-container .card a .card--hover p.link {
  margin: 20px 0 0;
  font-weight: bold;
  color: #5bc0eb;
}

.my-flex-container .card.card--dark a {
  color: white;
  background-color: black;
  border-color: #fde74c;
  border-width: thick;
}

.my-flex-container .card.card--dark a .card--hover .link {
  color: #fde74c;
}

#first-card,
#second-card,
#third-card {
  width: 250px;
}

#second-card .card--hover ul {
  display: inline-flexbox;
  position: relative;
  padding-top: 2.5px;
  width: 285px;
  left: -54px;
}

#third-card .card--hover ul {
  display: inline-flexbox;
  position: relative;
  align-items: center;
  left: -54px;
  width: 290px;
  top: -20px;
}

#third-card .card--hover p {
  margin: 0 0 5px 0;
}

#first-card p {
  text-align: justify;
  padding-top: 10%;
}

#first-card b {
  font-weight: 600;
  text-decoration: underline;
}

#second-card b {
  font-weight: 600;
  text-decoration: underline;
}

#second-card .card--hover li {
  text-align: justify;
  padding-top: -0.6px;
  margin: 0 0 60px 0;
}

#third-card p {
  text-align: justify;
  padding-top: 10%;
}

#third-card b {
  font-weight: 600;
  text-decoration: underline;
}

#first-card #no-hover,
#first-card #hover,
#second-card #no-hover,
#second-card #hover,
#third-card #no-hover,
#third-card #hover {
  color: black;
  text-align: center;
  top: 50%;
  bottom: 50%;
}

#first-card #hover,
#second-card #hover,
#third-card #hover {
  text-decoration: 4px underline;
}

#first-card a,
#second-card a,
#third-card a {
  border-style: groove;
  border-color: black;
  border-width: thick;
  border: double;
  border-width: 12px;
  font-family: 'Recursive', sans-serif;
  font-weight: 500;
}

#first-card #heading-chattime {
  padding-left: 2.5em;
}

#fourth-card i,
#fifth-card i,
#fourth-card #tools,
#fifth-card #tools {
  text-decoration: underline;
  font-family: 'Recursive', sans-serif;
}

#fourth-card .tool1,
#fifth-card .tool2 {
  text-align: center;
}

#fourth-card ul,
#fifth-card ul {
  padding-top: 4px;
  list-style: none;
}

#fourth-card li,
#fifth-card li {
  margin: 0 0 40px 0;
  font-family: 'Recursive', sans-serif;
  text-align: justify;
}

#fourth-card ul li::before,
#fifth-card ul li::before {
  color: white;
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 1em;
  /* Also needed for space (tweak if needed) */
  margin-left: -1em;
}

    /* iphone XR, 11 */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {

  @viewport{
    viewport-fit: cover;
  }
  body { padding: env(safe-area-inset, 0px); }


.site-title h1{
  position: relative;
  top: 50px;
}

.site-title h2{
  position: relative;
  top: 55px;
}

.nav .nav-menu, .nav .nav-items{
  flex-direction: column;
  padding-left: 32px;
}

.nav .nav-brand a{
  font-size: 1.6rem;
  padding: 1rem 0;
  display: block;
  font-family: 'Roboto Mono', monospace;
  color: white;
  position: relative;
  left: -1px;

}


/* What I have been working on- section */

.working-on h2{
  font-size: 40px;
  position: relative;
  top: 100px;
  left: -29px;
}


/* Reducing the size of the section*/

.project1{
  top: -120px;
}

.project1 #project-title{
  font-size: 65px;

}

.project-description #project-title2{
  font-size: 65px;
  position: relative;
  top: -20px;

  text-align: center;
}

.project-description .card{
  display: none;
}

main .project1{
  border-radius: 40px;
  height: 200vh;
}

main .project1 .card{
  border-radius: 40px;
  width: 20%;
}

/* Project1 cards */

.my-flex-container .card a{
  height: 340px;
}

}
<section class='project1'>
  <div class="chat-time">
    <h4 id='project-title'>Developed a Chat Application.</h4>
  </div>

  <div class="my-flex-container">

    <!-- Item1. -->
    <div id="first-card" class="card">
      <a id="first-a">
        <div class="card--display"><i class="material-icons"></i>
          <h2 id="no-hover">Description.</h2>
        </div>
        <div class="card--hover" aria-haspopup="true">
          <h2 id="hover">Description.</h2>
          <p id="heading-chattime">Experience <b>Chat-Time</b>:</p>
          <p>A Full-Stack Chat application developed using <b>Node, Express </b>and <b>MongoDB</b> to provide a secure and a personalized experience when chatting with your loved ones.</p>
        </div>
      </a>
      <div class="card--border"></div>
    </div>

    <!-- Item 2 -->
    <div id="second-card" class="card">
      <a href="" aria-haspopup="true">
        <div class="card--display"><i class="material-icons"></i>
          <h2 id="no-hover">Features.</h2>
        </div>
        <div class="card--hover">
          <h2 id="hover">Features.</h2>
          <ul>
            <li>
              <p>Consists of an <b>OAuth</b> <b>User-Authentication Framework</b> to help store a client's personal details for Logging and Signing-In.</p>
            </li>
            <li>
              <p>User-details are encrypted using <b>Hashing Algorithms</b> and are not reachable to the developer of the application.</p>
            </li>
          </ul>
        </div>
      </a>
      <div class="card--border"></div>
    </div>

    <!--Item 3.-->
    <div id="third-card" class="card" onclick="">
      <a aria-haspopup="true">
        <div class="card--display"><i class="material-icons"></i>
          <h2 id="no-hover">What's Next?</h2>
        </div>
        <div class="card--hover">
          <h2 id="hover">What's Next?</h2>
          <ul>
            <p>Enabling <b>Video</b> and <b>Audio Calls</b> over the Internet.</p>
            <p>Creating private and secure <b>Rooms</b> which shall allow clients to seperately communicate with each other.</p>
            <p>Integrating <b>OAuth2</b> to improve security due to the availability of <b>short-lived access tokens.</b></p>
          </ul>

        </div>
      </a>
      <div class="card--border"></div>
    </div>

    <!--Item4-->
    <div id="fourth-card" class="card card--dark">
      <a href="" aria-haspopup="true">
        <div class="card--display"><i class="material-icons">Back-End.</i>
          <h2>Hover to understand the Back-End Frameworks used for Chat-Time.</h2>
        </div>
        <div class="card--hover">
          <h2 class="tool1" id="tools">NodeJS and MongoDB.</h2>
          <ul>
            <li>Used NodeJS to develop the server-side of the application.</li>
            <li>MongoDB was used to store user the Hashed User-Credentials.</li>
            <li>Utilized the Websocket API to establish a connection between the server and multiple clients. The WebsocketClient and the WebsocketServer provided both client and server functionality.</li>
          </ul>

        </div>
      </a>
      <div class="card--border"></div>
    </div>

    <!--Item 5.-->
    <div id="fifth-card" class="card card--dark">
      <a href="" aria-haspopup="true">
        <div class="card--display"><i class="material-icons">Front-End.</i>
          <h2>Hover to understand the Front-End Frameworks used for Chat-Time.</h2>
        </div>
        <div class="card--hover">
          <h2 class="tool2" id="tools">HTML, CSS3 and Express.</h2>
          <ul>
            <li>Utilized HTML and CSS3 to control the layout and the properties of all the elements on the webpage.</li>
            <li>Express was also used to structure the application to handle multiple HTTP requests at specific URL's.</li>
            <li>Combining the above frameworks helped to develop the application in a secure and a modern way. </li>
          </ul>
        </div>
      </a>
      <div class="card--border"></div>
    </div>

  </div>
  </div>
  </div>
</section>

标签： htmljquerycssflexboxmedia-queries

解决方案

推荐阅读