在关注前面的输入时显示下一个div，然后再次隐藏它（CSS3、JavaScript、Jquery）

我有一个表，每个字段旁边都有字段和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>
...

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

如果有人对此也有任何解决办法，请让我知道

input:focus + div {display:block}

如果您想拥有类似$.fadeIn（）和$.fadeOut（）效果的jQuery。。。结合不透明度、可见性和过渡：-）

如果您想拥有类似$.fadeIn（）和$.fadeOut（）效果的jQuery。。。结合不透明度、可见性和过渡：-）

input:focus + div {display:block}