Question

enter image description here 你可以告诉我如何在按钮后面添加隐藏的div或按钮吗？实际上我需要增加点击区域而不增加x图像大小，以便用户可以点击整个区域。？

这是我的代码

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
  <button id="openPopup">openPOP</button>
    <div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right cross-border">Close</a>

        <div data-role="fieldcontain">
            <label for="testCaseIDValue">TestCase Name:</label>
            <input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
        </div>
        <a href="#" data-role="button" id="donePopUp" class="common-button">Done</a>
    </div>
</div>

</body>
</html>

js Code

$(function(){
  $('#openPopup').click(function(){




$( "#testCaseId" ).popup( "open" );
  })
})

enter image description here

Answer 1

将关闭图标用作较大元素的居中背景图像。

HTML

 <a href="#"></a>

CSS

a {
    display: block;
    background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
    width: 50px;
    height: 50px;
}

演示：http://jsfiddle.net/eAxb8/

Answer 2

对我而言，您似乎在寻找一个像按钮一样的隐形区域。请参阅以下小提琴。要删除蓝色，只需删除代码style="background-color:lightblue"

即可

http://jsfiddle.net/p943a/2/

Answer 3

尝试设置<div>作为按钮图形的容器，颜色与背景相同，但可点击。

例如，

<a href = "whatever.com">
    <div id="hidden_button">
    <div id="button_graphic">
    Button Text
    </div>
    </div>
</a>

stylesheet.css
a {
    text-decoration: none;
}
#hidden_button {
    background: #ffffff;
    width: 300px;
    height: 300px;
    }

#button_graphic {
    width: 150px;
    height: 150px;
    border: 4px solid black;
    border-radius: 5px;
    color: #ffffff;
    text-align: center;
    background-color: #F38630;
    margin: auto;
    margin-top: 75px;
    }

如果我正确地完成了我的CSS，这应该创建一个方形按钮，其边缘为150px×150px，其周围的容器为300px×300px，看起来不可见，但仍然可以点击。调整尺寸以满足您的需求。

如何在按钮后面添加隐藏的div或按钮？

3 个答案: