Question

我有一个表格，其中包含每个字段旁边的字段和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时，我需要用描述1等显示下一个div ......

因为我不需要jquery用于其他任何事情我不认为使用jquery库是最好的选择，所以请引导CSS3或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>

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

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

Answer 1

input:focus + div {display:block}

如果你喜欢像$ .fadeIn（）和$ .fadeOut（）这样的jQuery效果......结合不透明度，可见性和过渡： - ）

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

以下是redaxmedia指南

1 个答案: