div 뒤에있는 링크를 클릭 하시겠습니까?

제목이 내가 알게 된 문제를 적절하게 설명하고 있는지 잘 모르겠다 ...div 뒤에있는 링크를 클릭 하시겠습니까?

기본적으로 나는 내 웹 사이트를 재 설계하는 과정에 있는데, 내 포트폴리오의 갤러리보기에 프레임 내 작품의 조각에 대 한 이미지의 눈금을 얻을.

프레임 위로 마우스를 가져 가면 이미지가 숨겨지고 제목, 클라이언트, 카테고리 및 연도가 표시됩니다.

그러나 여기에는 이 있어야합니다.은 모든 것 위에 앉아 있고 클릭 할 수있는 링크 여야합니다. 그러나 위의 정보는 마크 업 아래에 있지만 이미지 위에 표시됩니다.

저는 이것이 위의 정보가 절대적으로 배치 된 DIV에있는 것과 관련이 있다고 추측합니다 (이는 프레임의 맨 위에 앉아서 필요합니다).

내가 달성하고자하는 것은 전체 프레임을 클릭 할 때 클릭 할 수있게하는 것입니다. 그 위에 마우스를 가져 가면 DIV로 덮여있는 영역까지도 가능합니다.

당신이있어 행동에 사이트를 볼 수 있습니다 ...이 불분명 한 경우 알려 주시기 바랍니다 : http://www.designbyadmiral.com/

을 나는 그 몇 가지를 정리 도움이 될 것입니다 확신합니다.

출처

2009-07-29 Anonymous

이것은 귀하의 질문과 관련이 없습니다. 죄송합니다. 그러나 귀하의 웹 사이트로 연결되는 링크는 Google의 페이지 순위를 대폭 향상시키지 않습니까? 그리고 stackoverflow는 이것을 어떻게 받아들입니까? – anderstornvig

@anderstornvig 실제로 no, nofollow (rel = "nofollow")를 사용합니다. – Nathan

그냥 모든 사람들이 포트폴리오 rollovers 어떤 자바 스크립트에 의해 구동되지 않습니다 알고 덜 논리적 마크 업 사이의 사이트 의이 부분에 자바 스크립트를 피하기 위해 선택 해야하는지 알고 있습니다. 유효한 방법으로 기능과 의미 론적 마크 업을 모두 가질 수있는 방법이 있기를 바랬습니다. –

는이 작업을 수행하려면, 당신은 아마거야 (많은 해결책을 만들었고 간단한 솔루션을 찾을 수 없었기 때문에) 많은 코드를 수정할 필요가 있습니다. 당신이 앵커를 사용하는 특별한 이유가없는 경우 (주 이외의 다른 모드 : 링크로 제길 앵커를 사용합니다)를 fallowing 조각은 작동합니다 :

$(".project").each(function(){ 
    var url = $(this).children('.project-link').attr('href'); 
    $(this).css('cursor', 'pointer'); 
    $(this).click(function(){ 
     window.location = url; 
    }); 
});

행운을 빕니다.

출처

2009-07-29 07:36:28 Nathan

모든 UI 항목에 대해 jQuery 플러그인을 사용하는 것 같습니다. 따라서 비헤이비어를 맞춤 설정하기가 어려울 수 있습니다.

다른 페이지로 이동하는 기본 링크의 HREF를 사용하는 오버레이의 DIV에 클릭 이벤트를 추가하는 것입니다 가장 간단한 것은 :

$("#topdiv").click(function() { 
    window.location = $("#originallink").attr("href"); 
});

출처

2009-07-29 07:12:59

내가이 마크 업으로 원하는 결과를 달성 없으며 자바 스크립트 해요 :

이 페이지에서 작동하지 않는 이유

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
ul { list-style: none } 
li { float: left } 
li a { display: block; position: relative; text-decoration: none; color: #5e5d56; } 
li a img, li a div { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 13px; border: none; } 
li a img { z-index: 2; } 
li a:hover img { display: none } 
li a div { background: #b8b7af; padding: 20px; z-index: 1; } 
</style> 
</head> 
<body> 
<ul> 
    <li> 
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:523px"> 
      <img width="432" height="497" alt="Maclure Library site redesign screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/maclure-2-screenshot-1.jpeg"/> 
      <div class="project-information"> 
     <h3>Maclure Library Site Redesign</h3> 
       <dl> 
        <dt>Client</dt> 
        <dd>Maclure Library</dd> 
        <dt>Year</dt> 
        <dd>2009</dd> 
        <dt>Category</dt> 
        <dd>Web</dd> 
       </dl> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:499px"> 
      <img width="432" height="473" alt="Infamy homepage screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/infamy-website-1-homepage.jpeg"/> 
      <div class="project-information"> 
     <h3>Infamy Website Design and Development</h3> 
       <dl> 
        <dt>Client</dt> 
        <dd>Schadenfreude Productions Ltd.</dd> 
        <dt>Year</dt> 
        <dd>2008</dd> 
        <dt>Category</dt> 
        <dd>Web</dd> 
       </dl> 
      </div> 
     </a> 
    </li> 
</ul> 
</body> 
</html>

확실하지; 하지만 난 당신이 그렇게 간단한 작업을 위해 자바 스크립트를 사용해야한다고 생각하지 않습니다.

출처

2009-07-29 08:11:32 Alsciende

나는 앵커 태그 안에 H3 또는 DL을 가질 수 없듯이, 앵커 태그 안에 DIV를 가질 수 없기 때문에 이런 식으로 할 것입니다. 이것이 제가 시도한 첫 번째 해결책이었습니다. –

div 뒤에있는 링크를 클릭 하시겠습니까?

답변

관련 문제