0

ユーザーが画像やテキストにカーソルを合わせることができるようにする Web サイトの要素を構築しています。

これが私のデモです: http://jsfiddle.net/j74Gc/

ホバー時のCSSトランジションアニメーションはうまく機能しますが、エリア全体にハイパーリンクを適用することは可能ですか? ユーザーが画像やテキスト、またはprojects_container_proj領域内の任意の場所をクリックすると、1 ページにリンクされますか?

現在使用しているHTMLは次のとおりです。

<section id="lastprojects3-920639076" class="home_widget recentProjects3 two columns" style="width:200px">
<div class="projects_container_proj">
    <div style="margin-top: 20px;" class="project_list_s3">
        <ul class="slides_container jcarousel-skin-tango">
            <li>
            <div class="slides_item post-thumb" onmouseover="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0.6)'); $(this).find('.magnify_this_thumb').css('left', '51%').css('opacity',1); $(this).find('.hyperlink_this_thumb').css('left', '43%').css('opacity',1); $(this).children('div').css('background','#4a90c2'); $(this).find('.p_title a').css('color', 'white'); $(this).find('.p_exerpt p').css('color', 'white'); $(this).find('.p_title').css('border-top', '4px solid #3b739b');" onmouseout="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0)'); $(this).find('.magnify_this_thumb').css('left', '-15%').css('opacity',0); $(this).find('.hyperlink_this_thumb').css('left', '105%').css('opacity',0); $(this).children('div').css('background','#EEE'); $(this).find('.p_exerpt p').css('color', ''); $(this).find('.p_title a').css('color', ''); $(this).find('.p_title').css('border-top', '4px solid #DDD');">
                <ul class="ch-grid">
                    <li>
                    <div class="ch-item">
                        <a style="position: relative; float: left; width: 100%; height: 100%; overflow:hidden;" href="/?post_type=portfolio&#038;p=1333">
                        <img class="img_thumb" alt="" src="http://placehold.it/200x200" style="position:relative; height:100%; width: 100%;"/></a>
                        <a class="flex_this_thumb" href="#"></a>
                        <div class="hover_the_thumbs" style="position: absolute; float: left; width: 100%; height: 100%;">
                            <div class="hyperlink_this_thumb" onclick="window.location = $(this).parents('.ch-item').children('a').eq(0).attr('href');" onmouseover="$(this).css('background','#4a90c2');" onmouseout="$(this).css('background','white');" style="position: absolute; width: 30px; height: 30px; top: 43%; float: left; left: 99%; color: black; background: white;">
                                <img src="#" style="margin-top: 7px; opacity: .8 !important;"/>
                            </div>
                        </div>
                    </div>
                    </li>
                </ul>
                <div class="no-flicker" style="position: relative; background: #EEE; padding-bottom: 15px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;">
                    <div style="height: 52px;">
                        <div style="padding-left: 15px; padding-top: 6px; border-top: solid 4px #DDD; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;" class="p_title no-flicker">
                            <a style="-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;" href="/?post_type=portfolio&#038;p=1333">Title</a>
                        </div>
                    </div>
                </div>
            </div>
            </li>
        </ul>
    </div>
</section>

ありがとうございました！！

4

5 に答える 5

3

<a>おそらく、プロパティでタグを使用できdisplay: blockます。

于 2013-02-27T11:37:43.653 に答える
1

これは機能します。

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}


<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>
于 2013-02-27T11:48:39.100 に答える
1

JavaScript を使用しない場合は、div をaタグで囲むことができます。

于 2013-03-02T07:29:08.657 に答える
1

はい、あなたはこのようにすることができます：

$('.projects_container_proj').children().click(function(){
     window.location= 'your url';
 });

それが役に立てば幸い ：）

于 2013-02-27T11:59:38.327 に答える
0

これを試して：

<div class="projects_container_proj" onclick="window.location='http://www.google.com';">
    Other things here
</div>
于 2013-02-27T11:35:16.587 に答える