0

我有一个带有表格的网页。页面分为左右两列。表格在左侧，右侧有一个带有说明的框。

目前，右侧的框由一个cssarrowplease #arrow_box div 组成，该 div 配置了指向左侧的箭头。

我希望该箭头移动，使其指向左侧具有焦点的表单字段。

通过使用 CSS，我可以手动上下移动箭头。但是，我不确定如何在标签或单击以关注每个不同的表单字段时动态地进行这些移动。

4

1 回答 1

0

如果我理解正确，您可以为每个位置添加类，并#arrow_box div在焦点位于某些表单字段时根据样式更改类。

虽然这是一个冗长的方法。

CSS 类 1：

.arrow_box 
{ 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before 
{ 
    left: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
.arrow_box:after 
{ 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #88b7d5; 
    border-width: 10px; 
    top: 10%; 
    margin-top: -10px; 
} 
.arrow_box:before 
{ 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #c2e1f5; 
    border-width: 16px; 
    top: 10%; 
    margin-top: -16px; 
}

和 CSS 类 2：

唯一的变化将是 className 和以下内容： 示例：

.arrow_box
{
    top: 10%;
}

变成 

.arrow_box_element2
{
    top: 20%;
}

假设您有一个在元素JavaScript上时调用的方法：Focus

function onFocusElement1()
{
     $("#arrow_box").attr('class', 'arrow_box');
}

function onFocusElement2()
{
     $("#arrow_box").attr('class', 'arrow_box_element2');
}

希望这可以帮助 ：）

于 2013-04-05T07:29:36.973 回答