>

이미지의 포트폴리오 그리드가 있으며 사용자가 텍스트를 가져다 놓거나 투명하게 오버레이 할 때 텍스트와 버튼이 표시됩니다

클릭시 기능을 사용하고 있습니다

터치 스크린 랩톱에서는 작동하지만 iOS 전화 나 태블릿에서는 작동하지 않습니다

첫 번째 탭에서 오버레이가 나타나지만 다시 탭해도 다른 격자 이미지를 탭하지 않으면 사라지지 않습니다.

2 번째 탭에서 사라지고 싶습니다

이 작업을 수행하는 다양한 방법을 시도했으며 다른 그리드 이미지를 누를 때 사라지는 가장 가까운 방법

내 코드는 다음과 같습니다.    HTML

   <div class="col-xs-12 col-sm-7"><div class="image-wrap">
<div onclick="on()">
<img src="assets/images/pic.jpg">
<div class="overlay blue">
        <h3>Portfolio item 1</h3>
        <hr>
          <p><strong>Coming Soon</strong><br> some overlay text here</p>
          <br>
          <a href="contact-us" class="btn btn-white btn-lg">View Website</a>
        </div>
</div>
</div>
</div>

JS

function on() {
    document.getElementById("overlay").style.display = "block";
}
function off() {
    document.getElementById("overlay").style.display = "none";
}

CSS

.image-wrap {
display: inline-block;
position: relative;  
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
 }
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
}

처음에는 iOS를 제외한 모든 기기에서 원하는 결과를 얻을 수있는 CSS만으로 이것을 시도했습니다!

따라서 온 클릭 기능을 사용하여 모든 장치에서 작동하는지 확인하기로 결정했습니다. CSS와 함께 사용하기 위해 작성한 기존 코드에 on click 기능을 추가했지만 JS를 처음 접했을 때 잘못된 위치에 있는지 궁금합니다. 변형을 많이 시도했지만 이것이 작동하도록하는 것이 가장 좋습니다

두 번째 클릭에서 오버레이가 사라지는 방법에 대한 제안 아이디어는 훌륭합니다!

js 바이올린 https://jsfiddle.net/49h450g9/14/

참고 : 이것은 휴대 전화가 아닌 터치 스크린 노트북에서 잘 작동합니다!

감사합니다!

  • 답변 # 1

    jsfiddle 예제의켜기끄기기능이 전혀 작동하지 않습니다. 무슨 일이 일어나면 모바일 기기의 초점과 같은 모바일 작업의 동작과 같은 일반 화면에서의 호버 효과입니다.

    또한, 귀하의 설명에 따르면 프로젝트에 둘 이상의 포트폴리오가 있다고 생각합니다. 따라서 ID가오버레이인 여러 요소가 있으며 동일한 ID를 여러 번 사용하면 HTML에 대해 유효하지 않으며 JavaScript 오류가 발생합니다.

    프로젝트가 제대로 작동하게하려면 아래 목록을 따르십시오 :

    프로젝트에 jQuery를 추가했는지 확인하십시오 (일반적으로 </body> 이전). )

    이제 아래 포트폴리오 항목을 생각해 보도록하겠습니다

    <div class="portfolio">
        <img src="images/portfolio-1.jpg" alt="...">
        <div class="overlay">Link</div>
    </div>
    <div class="portfolio">
        <img src="images/portfolio-2.jpg" alt="...">
        <div class="overlay">Link</div>
    </div>
    <div class="portfolio">
        <img src="images/portfolio-3.jpg" alt="...">
        <div class="overlay">Link</div>
    </div>
    
    

    그런 다음 미디어 쿼리 안에 일반 호버 CSS 스타일을 지정하십시오. 따라서 js 스타일에는 영향을 미치지 않습니다 (휴대 기기로 992px 미만의 미디어를 결정합니다) :

    .portfolio{
        background-color: #f1f1f1;
        position: relative;
    }
    .portfolio .overlay{
        background-color: rgba(0, 0, 0, 0.7);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all 0.3s ease;
        width: 100%;
        height: 100%;
    }
    @media all and (min-width:992px){
        .portfolio:hover .overlay{
            opacity: 1;
        }
    }
    
    

    이제 jQuery를 사용하면 사용자가 .portfolio 를 클릭하는 동안 이벤트를 사용할 수 있습니다  항목을 추가하고 클래스를 토글하여 CSS를 추가합니다.

    $(document).ready(function(){
        'use strict';
        $(.portfolio).on('click', function(){
            $(this).siblings('.portfolio').removeClass('hovered');
            $(this).toggleClass('hovered');
        });
    });
    
    

    이제 hovered 를 추가합니다  첫 번째 클릭으로 수업을 듣고 hovered 를 제거하십시오.  두 번째 클릭 수업. 또한 .hovered 를 제거합니다  다른 포트폴리오 항목에서. 이제 호버 효과와 동일한 CSS를 추가하십시오.

    .portfolio.hovered .overlay{
        opacity: 1;
    }
    
    

  • 답변 # 2

    다음을 시도하십시오 :

    $("*").on("click, touchend", function(e) { $(this).focus(); });
    
    

    또는 그 반대를 달성하기 위해;

    $("*").on("click touchend", function(e) { $(this).hover(); });
    
    

    호버 이벤트는 iOS 또는 다른 모바일에서는 잘 작동하지 않습니다.

    또 다른 제안은

    css를 사용하여

    :hover with :active.

  • 이전 c - 할당 된 메모리를 해제 할 때 힙 손상
  • 다음 파이썬에서 아무것도 가져 오지 않고 여러 특수 문자가있는 문자열을 목록으로 분할