0

画像に負の上部マージン (-15px) を設定しましたが、正常に動作します。しかし、問題はクリックイベントです。クリックは、画像のすぐ下 (つまり、ブラウザ上で正確に画像が表示されているビューから +15 ピクセル下) で引き続き機能します。ここに画像の説明を入力

<div data-role="page" >

    <!-- Header -->
    <div data-role="header" class="listHeader" data-position="fixed" data-tap-    toggle="false">

        <img src="images/all_lists_normal.png" class="view_list"> 
        <img src="images/x_normal.png" class="x_image">
        <div class="titleList">
            <p id="page_title" class="label"></p>
        </div>

        <img id="id_new_products" src="images/add_products_normal.png" class="addNewItemImage_page4"> 
        <img id="id_find_stores"  src="images/find_store_normal.png"   class="addNewItemImageMargin">
    </div> <!-- / header -->

    <!-- Content -->
    <div data-role="content" class="mainBackground">
     some content....
    </div>

</div>




.listHeader {
background: url(../images/header_nologo.png) no-repeat 50% 0px;
background-size: 100% 107%;
height: 60px;

}

.view_list {
float: left;
margin-top: 12px;
}

.x_image {
float: right;
margin-right: 15px;
margin-top: 17px;
}

.addNewItemImage_page4 {
min-width: 100%;
margin-top: 9px;
position:relative;
}

.addNewItemImageMargin {
min-width: 100%;
margin-top: -14px; /****************** PROBLEM ***********/
position:relative;
}

.mainBackground {
background: url(../images/background.jpg) no-repeat 50% 0px;
background-size: 100% 100%;
min-height: inherit;
min-width: 100%;
margin-top: -2px;
}

JS :-

  $("#id_find_stores")
    .click(function(){

        alert('hi');

    });
4

1 に答える 1

1

これは、ラッピング div の代わりに img にアクション ハンドラーを配置する例です: http://jsfiddle.net/vhxc3/

これは、あなたが私たちに提供した情報を考え出そうとしたものです: http://jsfiddle.net/hhkuL/

$(document).ready(function() {
    $('#id_new_products').click(function() {
        $(this).css({ "border" : "1px solid red" });            
    }); 
});​
于 2012-12-05T05:55:52.067 に答える