如何解决在手机和平板电脑上查看时,如何更改元素上的悬停并使它们可单击但具有类似功能
我有以下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,#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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。