Сделать изображение появляется при наведении курсора с Jquery - PullRequest
Новая
       1

Сделать изображение появляется при наведении курсора с Jquery

0 голосов
/ 16 января 2011

Я посмотрел в Интернете и не смог найти конкретный ответ или учебник о том, что я хотел бы сделать с моей парящей навигацией;Больше всего я нашел jquery-кодирование для анимации изображения или фоновой анимации.

Моя навигация на данный момент настроена на плавное изменение цвета при наведении в данный момент.Что я хотел бы сделать, так это то, что когда кто-то наводит курсор на навигацию, ссылка не только исчезает с другим цветом (который у меня работает), но я также хочу, чтобы изображение стрелки отображалось слева от текста.,Я бы хотел, чтобы текст тоже исчез, но если это невозможно, я не привередлива.Для пояснения, я не хочу, чтобы стрелка отображалась, когда ссылка не наведена.

Если это вообще помогает, вот текущий запрос jade на затухание: 

this.fadeLinks = function() {   

var selector = "#nav1 a"; 
var speed = "slow" 

var bgcolor = "#6c919a";    


$(selector).each(function(){ 
    $(this).css("position","relative");
    var html = $(this).html();
    $(this).html("<span class=\"one\">"+ html +"</span>");
    $(this).append("<span class=\"two\">"+ html +"</span>");        
    if($.browser.msie){
        $("span.one",$(this)).css("background",bgcolor);
        $("span.two",$(this)).css("background",bgcolor);    
        $("span.one",$(this)).css("opacity",1);         
    };
    $("span.two",$(this)).css("opacity",0);     
    $("span.two",$(this)).css("position","absolute");       
    $("span.two",$(this)).css("top","0");
    $("span.two",$(this)).css("left","0");      
    $(this).hover(
        function(){
            $("span.one",this).fadeTo(speed, 0);                
            $("span.two",this).fadeTo(speed, 1);
        },
        function(){
            $("span.one",this).fadeTo(speed, 1);    
            $("span.two",this).fadeTo(speed, 0);
        }           
    )
});
};

$(document).ready(function(){   
fadeLinks();
});

Вот код для навигации: 

#nav1 {
width:730px;
top: -380px;
left: -2px;
font-size:20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#ffffff;
padding-top:6px;
padding-bottom:10px;
position:relative;
text-align:center;
line-height:30px;
}


#nav1 a{
font-size:30px;
font-family: Tahoma, Geneva, sans-serif;
color:#fff;
text-decoration:none;
}
 #nav1 a span.two{
color:#069;
cursor:pointer;
}

Изображение стрелки, которое я хочу отобразить, это «images / arrow.png».Я считаю, что для такого типа вещей мне нужно было бы добавить ошибку png в мою кодировку для IE, да?Кроме того, если мне нужно будет что-то добавить в мой фактический HTML для этого, дайте мне знать.Заранее спасибо!

Ответы [ 4 ]

0 голосов
/ 17 января 2011

Это будет мое последнее слово на эту тему. Если вы не против использования таблицы вместо div, то есть гораздо более простое решение. CSS предполагает изображение размером 32 пикселя. Вам придется изменить его, если изображение стрелки имеет другую высоту.

С уважением Neil 

----------------------------------CSS --------------------

#nav2, #nav2 tbody, #nav2 tr, #nav2 td{height: 32px;}
#nav2 td{vertical-align: middle; border: 2px solid #000;  margin: 0;}
#nav2 img {display: none; height: 32px; margin: 0; padding: 0; border:0;}
#nav2 div {
              float: left;
              height: 32px;
              margin: 0;
              padding: 0;
              border: 0;
              color: #F00;
              background-color: #0F0;
          }
#nav2 p {
    float: left;
    font-size: 14px;
    padding: 9px 4px 0 4px;  /*  9px = (32-14)/2   */
    height: 23px;            /* 23px = (32-9)      */
    margin: 0;
    border: 0;
    color: #F00;
    background-color: #0F0;
}

-----------------------------  jQuery javascript --------------------

$('#nav2 a').each(function(){
    $(this).hover(
        function(){
                    $('img',    this).fadeIn();
                    $('div, p', this).css({backgroundColor: "#F00", color: "#00F"});
        }
        ,
        function(){
                    $('img',    this).fadeOut();
                    $('div, p', this).css({backgroundColor: "#0F0", color: "#F00"});
        }
    );
});

---------------------------------  HTML   ---------------------------

<table id="nav2">
    <tr>
        <td><a href="../example1.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 1</p></a></td>
        <td><a href="../example2.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 2</p></a></td>
        <td><a href="../example3.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 3</p></a></td>
    </tr>
</table>
0 голосов
/ 16 января 2011

'Ясно',

Ниже приведен простой код, аналогичный тому, который я использую. Это хорошо работает, если высота изображения стрелки меньше или равна высоте текста в ссылке.

Возможно, вы могли бы изменить его в соответствии с вашими целями. Кроме того, обратите внимание на использование одинарных кавычек (') и двойных кавычек ("), что избавляет от необходимости" экранировать "ваши двойные кавычки. 

$('.navlink').each(function(){
    $(this).hover(
       function(){
            $(this).css({backgroundColor: "#F00", color: "#00F"})
                   .prepend('<img src="../icons/arrow.png" alt="" />');
        }
        ,
        function(){
            $(this).css({backgroundColor: "#0F0", color: "#F00"});
            $('img', this).remove()[0];
        }
    );
});

Это избавляет от "span" s, абсолютного позиционирования и необходимости копировать HTML и т. Д.

С уважением, Нил

0 голосов
/ 17 января 2011

'Ясно',

Ниже следует дать вам то, что вы просите. Это немного сложнее, чем мой предыдущий код, поскольку он пытается центрировать текст как по вертикали, так и по горизонтали. Дайте мне знать, как вы справляетесь с этим.

CSS, jQuery Javascript и HTML: 

<style>
#nav1 {
    float: none;
    padding: 0;
    margin: 0;
}
#nav1 div {
    float: left;
    position: relative;
    padding: 4px;
    height: 36px;
    border: 2px solid #000;
}
#nav1 div p {
    position: absolute; 
    right: 4px;   
    padding: 0 4px;
    text-align: center;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;  /* negative and half the font size */
}
.clear {clear: both;}
</style>

<!--  Below is the Javascript code  -->
<!--  ############################  -->

<script type="text/javascript">
$(document).ready(function(){
</script>

$('#nav1 div').each(function(){
    var content_width = 200, arrow_width = 32;
    $('p', this).css({width: content_width, left: 0});
    $(this).css({width: content_width});
    $(this).hover(
        function(){
            var $this = $(this);
            var new_width = $this.width() + arrow_width;
            $this.css({backgroundColor: "#F00", color: "#00F", width: new_width})
                 .prepend('<img src="../images/arrow.png" alt="" />');
            $('p', this).css({left: arrow_width});
        }
        ,
        function(){
            var $this = $(this);
            var new_width = $this.width() - arrow_width;
            $('img', this).remove()[0];
            $this.css({backgroundColor: "#0F0", color: "#F00", width: new_width});
            $('p', this).css({left: 0});
        }
    );
});

<!--  Below is the HTML  -->
<!--  #################  -->

<div id="nav1">
<a href="../javascipt/slimbox2.js"      ><div><p>"Minified" slimbox.js</p></div></a>
<a href="../javascript/slimbox2_full.js"><div><p>slimbox2_full.js     </p></div></a>
<a href="../css/slimbox2.css"           ><div><p>slimbox2.css         </p></div></a>
</div>
<div class="clear"></div>
0 голосов
/ 16 января 2011

Я бы предложил добавить пустой код или контейнер div в ваш код для хранения изображения стрелки.Затем вы можете использовать селектор JQuery, чтобы затемнять их, когда вызывается событие hover для ссылок.

В вашем коде уже есть fadeTo для того, что, как я предполагаю, являются ссылками, просто добавьте код взатемните стрелки, используя CSS-селектор для промежутков или делителей, которые будут представлять стрелки.

...