Question

在我的网站注册表单中，我想为我的表单创建一个工具提示，但我想要一个由css3构建的箭头。我没有最模糊的线索如何做这种事情。

基本上，当输入：焦点时，三角形（使用CSS3渲染）将在过渡中向上或向下移动，以指向该输入文本字段。这可行吗？怎么样？谢谢。

我想完全用CSS，而不是jQuery或JavaScript。我试图尽可能避免使用JavaScript，以免使用带宽。

Answer 1

您可以通过边框相对轻松地完成三角形。 This demo可能是我最喜欢的主题，它通过在CSS中创建聊天/工具提示泡泡来实现。

但是，您可以获得更多创意：http://jsfiddle.net/czuxH/

我不会过分担心通过删除JavaScript的最小片段来节省带宽 - 它只是文本，并且适当缩小和压缩它实际上并不是很多带宽。你在这里需要JS来触发动画并定位箭头（尽管你可以使用CSS3动画进行过渡）。

Answer 2

如果没有JavaScript，您无法严格执行此操作，因为包含:focus的选择器只能选择:focus伪选择器之外的后代元素，并且input元素为空元素。您也不能使用伪元素，因为input元素是替换元素。

您可以使用JavaScript的 touch 来添加活动中的元素。

var input = document.getElementsByName('some_input')[0],
    parent = input.parentNode,
    bubble = document.createElement('div');

bubble.className = 'bubble';
bubble.textContent = 'Your text.';
parent.appendChild(bubble);

input.addEventListener('focus', function() {
    parent.className += ' focus';
});

input.addEventListener('blur', function() {
    parent.className = parent.className.replace(/\bfocus\b/, '');
});

指向每行表格的箭头

2 个答案: