0

我有一个表，每个字段旁边都有字段和 div

我需要在聚焦场时以不透明度效果（0 - 100 和 100 - 0）显示它们，并在场未聚焦时再次隐藏它们

<!-- First -->
<tr class="tr">
    <td class="td">
        <input name="field1" type="text" class="field">
        <div class="div">Description 1</div>
    </td>
</tr>
<!-- Second -->
<tr class="tr">
    <td class="td">
        <input name="field2" type="text" class="field">
        <div class="div">Description 2</div>
    </td>
</tr>
...

因此，当我专注于 field1 时，我需要使用 Description 1 等显示下一个 div ...

因为我不需要 jquery 来做其他任何事情，所以我认为使用 jquery 库不是最好的选择，所以请使用CSS3or指导Javascript，如果没有办法，jQuery请指导

我已经使用了document.getElementById(id) style.display=="block"，但我需要为每个 div 和多行 javascript 设置 ID，而且我也有不透明或其他效果问题

这是redaxmedia指南之后的答案

<style type="text/css">
    .divclass {
        visibility: hidden;
        zoom: 1;
        filter:alpha(opacity=0);
        opacity: 0.0;
        -webkit-transition: all 300ms;
        transition: all 300ms;
    }
    input.inputclass:focus + div {
        visibility: visible;
        zoom: 1;
        filter:alpha(opacity=100);
        opacity: 1.0;
        -webkit-transition: all 300ms;
        transition: all 300ms;
    }
</style>

<table>

<tr>
    <td>
        <input name="field1" type="text" class="inputclass">
        <div class="divclass">Description 1</div>
    </td>
</tr>

<tr>
    <td>
        <input name="field2" type="text" class="inputclass">
        <div class="divclass">Description 2</div>
    </td>
</tr>

</table>

唯一的问题是使用可见性：隐藏仍然会在页面中发生，它不像显示：隐藏

如果有人对此也有任何解决方案，请告诉我

4

1 回答 1

3 
input:focus + div {display:block}

如果你喜欢 jQuery 像 $.fadeIn() 和 $.fadeOut() 效果...结合不透明度、可见性和过渡:-)

于 2013-07-14T14:44:00.957 回答