[英]Show next div when focusing on input before it , and hide it again after that (CSS3 , JavaScript, Jquery)
I have a table with fields and divs next to them for each field 我有一个表,其中每个字段旁边都有字段和div
i need to show them with opacity effect (0 - 100 and 100 - 0) when focusing on field and hide them again when field is not focused 我需要在聚焦于场时以不透明效果 (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>
...
So when i focus on field1 i need to show the next div with Description 1 etc... 因此,当我专注于field1时,我需要显示具有Description 1等的下一个div ...
As i don't need jquery for anything else i don't think using jquery library is the best option, so please guide with CSS3
or Javascript
and if there is no way then guide with jQuery
please 因为我不需要jquery做其他事情,所以我认为使用jquery库不是最好的选择,所以请使用
CSS3
或Javascript
指导,如果没有办法,请使用jQuery
进行指导。
i already use document.getElementById(id) style.display=="block"
but i need to have IDs for each div and many lines of javascript and i also have the opacity or other effects problem 我已经使用
document.getElementById(id) style.display=="block"
但我需要为每个div和许多行的javascript提供ID,并且我也有不透明度或其他效果问题
Here is the answer after redaxmedia's guide
这是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>
the only problem is using visibility:hidden will still take place in the page its not like display:hidden 唯一的问题是使用可见性:隐藏仍然会在页面中发生,与显示不一样:隐藏
if any one has any solution for this too, please let me know 如果有人对此有任何解决方案,请告诉我
input:focus + div {display:block}
如果您想拥有像$ .fadeIn()和$ .fadeOut()这样的jQuery效果...结合不透明度,可见性和过渡效果:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.