저희 쇼핑몰에 이미지위에 마우스를 올리면 버튼이 노출되는 상페를 11번가와 스토어팜에 등록 하려고 합니다.
본문
http://www.byullnan.com/product/detail.html?product_no=120&cate_no=65&display_group=1
이미지위에 마우스를 올리면 자세히 보기 버튼이 나오면서 그것을 누르면 상페가 나옵니다.
옥션, g마켓, 인터파크는 <sytle></style>
소스가 먹혀서 잘 적용이 되는데
스토어팜과 11번가는 <style>소스를 막아놨는지 구글에서 상페 소스를 검색해봐도 나타나지가 않네요.
혹시나 외부스타일로 링크를 걸으면 나올까싶어 걸어놔도 보이지가 않고 적용이 안되네요.
http://smartstore.naver.com/byullnan/products/2811640642
차라리 스타일 소스를 빼고
스타일 소스를 내부안에다가 다 넣어주면 될것같아서 .
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
<div class="container" style="width: 50%; position: relative;">
<img class="image" style="transition:0.5s; width: 100%; height: 100%; display: block; opacity: 1; backface-visibility: hidden;" alt="Avatar" src="/web/upload/NNEditor/20180427/copy-1524790511-4004_4005_list.jpg">
<div class="middle" style="transition:0.5s; left: 50%; top: 50%; text-align: center; position: absolute; opacity: 0; transform: translate(-50%, -50%);">
<a href="http://byullnan.com/web/upload/NNEditor/20180427/A.jpg" target="_blank"> <div class="text" style="padding: 16px 32px; color: white; font-size: 16px; background-color: rgb(76, 175, 80);">자세히 보기</div></a>
</div>
</div>
이렇게 변경했는데 :hover 소스를 image 태그에 어떻게 넣는지 아무리 검색해봐도 못찾고 있네요.
좀 알려주시면 감사하겠습니다.
이 이외에도 강제로 외부스타일 소스를 먹히게 하든가 그런 방법이 있다면 알려주세요.
감사합니다.
답변 1
일단 css로 img src를 바꾸는 방법은 없습니다. 스크립트를 사용하여 src를 바꿀 수 있기는 하지만, src속성을 바꾸는 방식은 최근에는 거의 사용되지 않습니다.
:hover 에 이미지를 바꾸는 방식은 보통 img 태그가 아니라 div 등의 background-image나 background-position을 바꾸는 방식으로 작동시킵니다.
