Question

我希望在第一列中选择相关复选框时在第二列中显示图像。以下是我开发的代码。基本上，当我将鼠标悬停在链接上时，我得到一个图像工具提示。我想知道它是否是可以在第二列中显示悬停图像 HTML：

<TABLE CELLPADDING=3 CELLSPACING=10 BORDER=2 BGCOLOR="#FFFFCC">
    <TR>
        <TD ALIGN=CENTER COLSPAN=5 BGCOLOR="#000099"><FONT SIZE="+1" 
         COLOR="#00FFFF">LINKS </FONT><I><FONT 
         COLOR="#00FFFF"><B> </B></I></FONT></TD>
    </TR>
    <TR>

        <TD ROWSPAN=3><FONT SIZE="-2" FACE="ARIAL"><B><span>
    <div>

    <input id="radioDefault_3" name="Field3" type="hidden" value=""/>
    <a href="#" class="tooltip"  style=" color:black;line-height:25px; font-size:16px;" target="_self" >
    <input id="Field3_0"        name="Field3"       type="radio"        class="field radio"         value="Link 1"      tabindex="1"                        onchange="handleInput(this);"       onmouseup="handleInput(this);"                      checked="checked"                   />


      lINK 1
      <span style=" background-color:white;margin-left:100px;">

        <img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#tbm=isch&q=rectangle&imgrc=A2WZlqcIvTWBzM:" style="float:center; background-color:#00529b;"    />
       </span>
</a>

</div>
    </span></A>, 
        <span>
        <div>
        <a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;">
    <input id="Field3_1"        name="Field3"       type="radio"        class="field radio"         value="Link 2"      tabindex="2"                        onchange="handleInput(this);"       onmouseup="handleInput(this);"                                  required        />
    LINK 2
    <span style="margin-left:100px; margin-top:-50px;">

       <center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center; " width=100% height=100%  /></center>

    </span>
</a>    </A>, 
        <BR><span>
        <div>
        <a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;">
    <input id="Field3_2"        name="Field3"       type="radio"        class="field radio"         value="Link 3"      tabindex="3"                        onchange="handleInput(this);"       onmouseup="handleInput(this);"                                  required        />
    LINK 3
     <span style="margin-left:50px;margin-top:-80px;">

        <center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center;"width=100% height=100%    /></center>

    </span>
</a>

        </div>
        </span></A></B></FONT></TD>
         <TD ROWSPAN=3><IMG SRC="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" VALIGN=MIDDLE ></TD>
        </TR>
</TABLE>
</CENTER>

CSS：

<style>
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:1000px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#00529b;
 border:1px solid #DCA; }



a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
tr.noBorder td {
  border: 0;
}
</style>

Answer 1

你可以在1 div中嵌套2个div来在css中创建两列。

Answer 2

请找一个小例子

API documentation

$(document).ready(function() {

    $('#checkbox1').change(function() {
        if($(this).prop('checked')) {
        $('#img1').css('display', 'block');
    }else {
        $('#img1').css('display', 'none');
    }
});

}）;

当选中复选框时，是否可以在第一列中显示复选框并在第二列中显示图像？

2 个答案: