Question

我需要一些帮助。

我有当前的代码：

<script type="text/javascript">

$(document).ready(function(){
    $('div.imagens1').mouseover(function(){
        div_imagem = $(this); //Div que tem a imagem
        p = div_imagem.find('p').first();
        texto_p = p.text();

        $('#lista1').find('p').each(function(){

            $(this).css('color','white');
            $(this).css('font-size','20px');

            if ( ($(this).text()).toLowerCase() == (texto_p) ){

                texto_lista = $(this); //Texto (elemento p da lista) respetivo à imagem

                //Podes por exemplo meter o texto P a negrito assim:
                texto_lista.css('color','#575658');
                texto_lista.css('font-size','26px');

            }
        });

    });
});
</script>

在图像中搜索“salas”之类的文本，然后转到我侧面的列表来更改其CSS以使其突出显示。

现在我需要找到一种方法，当所说的事情发生时让箭头出现。

有人可以提供帮助。

最诚挚的问候，路易斯

Answer 1

一种方法是创建一个箭头＆＃39;使用JQuery。基本上你会创建以下HTML：

 <span class='arrow' style="font-size:36px">&#8678;</span>

并在找到结果后追加。所以

 $('div.imagens1').mouseover(function(){
     ...
     $('.arrow').remove();
     ...

 if ( ($(this).text()).toLowerCase() == (texto_p) ){
     texto_lista = $(this); //Texto (elemento p da lista) respetivo à imagem
     //Podes por exemplo meter o texto P a negrito assim:
     texto_lista.css('color','#575658');
     texto_lista.css('font-size','26px');

     var arrow = $('<span></span>').css('font-size','36px').addClass('arrow').html('&#8678;')
     texto_lista.append(arrow);

 }
 ...

应该有用。

您需要了解箭头的外观以及它在DOM中的添加位置。没有看到HTML就很难分辨。箭头的HTML实体可以很容易地用图像替换。

Answer 2

您可以使用伪元素来实现这一目标这样的事情：http://jsfiddle.net/9ws7gsv2/
您可以将伪元素content属性更改为您想要的任何内容，甚至是流行的Font Awesome之类的字体图标。

悬停图片时添加箭头

2 个答案: