2016-03-24 17 views
2

Web siteme biraz serin efektler koymaya çalışıyorum .. şimdi kullanıcının bir konu seçmesini istiyorum. Şimdi 4 konuğum var ve onları "resim linki" olarak istediğim 4 güzel fotoğraf buldum. Örneğin: kullanıcı resmini duyduğu fareyi hareket Fare resmin üzerine taşınırsa bir şeyler yapın? Javascript Jquery

<a href="{{ action('Test\\[email protected]', [1]) }}"> 
    <img src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [2]) }}"> 
    <img src="/pictures/Gesundheit.jpg" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [3]) }}"> 
    <img src="/pictures/Allgemeines.jpg" alt="Allgmeines" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [4]) }}"> 
    <img src="/pictures/Technik.jpg" alt="Technik" style="width:280px;height:228px;"> 
</a> 

Şimdi, böyle bir şey istiyorum

ardından resim biraz daha parlak almalısınız ve daha sonra blogda eğer böyle

adını orada yazılmalıdır Fareyi oyun görüntüsünün üzerine getiriyorum, daha sonra görüntü parlaklaşıyor ve ortada Oyun duruyor. Eh, hala javascript/Jquery öğreniyorum ama böyle bir şey yapmadım.

Birisi bana yardım edebilir mi?

Yardımlarınız için teşekkürler!

Benim deneyin:

<script> 
    $(".imgClass") 
    .mouseenter(function() { 
    console.log("Enter to "+$(this)); 
    }) 
    .mouseleave(function() { 
    console.log("Leave to "+$(this)); 
    }); 
    </script> 

<a href="{{ action('Test\\[email protected]', [1]) }}"> 
     <img class=".imgClass" src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"> 
    </a> 
+0

= 'sınıfını değiştirmek' sınıfa 'tarafından =" imgClass"' cevabım – simon

cevap

1

1) CSS çözüm

.someClass { 
    // mouse is not over div 
} 
.someClass:hover { 
    // mouse is over div 
} 

2) JS çözüm

<div id="myBox" onmousemove="myMoveFunction()"></div> 

<script> 
function myMoveFunction() { 
    document.getElementById("myBox").style.color = "blue"; //just a example 
} 
</script> 

3)

<div id="myBox" onmousemove="myMoveFunction()"></div> 

$("#myBox").hover(function() { 
    $(this).show(); //just a example 
}); 

.hover burada jQuery etrafında daha fazla fonksiyon bakın jQuery çözüm api.jQuery documentation

Düzenlenen kodu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<h2 style="color: white">In welchem Themenbereich willst du einen Thread erstellen?</h2><br><br> 

<a href="{{ action('Test\\[email protected]', [1]) }}"> 
<img class="zoom" src="http://www.myfico.com/Images/sample_overlay.gif" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [2]) }}"> 
<img class="zoom" src="/pictures/Gesundheit.jpg" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [3]) }}"> 
<img class="zoom" src="/pictures/Allgemeines.jpg" alt="Allgmeines" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [4]) }}"> 
<img class="zoom" src="/pictures/Technik.jpg" alt="Technik" style="width:280px;height:228px;"> 
</a> 

<script> 
$(".zoom").hover( 
function() { 
    $(this).fadeTo("fast", 0.5) 
    $("#myCategory").show(); 
}, 
function() { 
    $(this).fadeTo("fast", 1) 
    $("#myCategory").hide(); 
}); 
</script> 
+0

gösterir misin @ItzeMe benim düzenlemeyi see my Bunu nasıl kullanabileceğinizi html kodumla mı? JS çözümünü veya jquery çözümünü kullanmayı çok isterim .. ama bu sözdizimini gerçekten anlamıyorum .. php ile daha fazla ilgilenmiyorum JS/jQuery :) – ItzeMe

+0

JS çözümünü kopyaladım ve img etiketindeki id = "myBox", ancak bu gerçekten çalışmadı – ItzeMe

+0

Bu örneği sizin için yaptım (ilk bağlantınızla ve rastgele görüntünüzle). Böyle bir şey mi demek istediniz? https://jsfiddle.net/atg5m6ym/2070/ – JaxCze

1

Kullanım css sınıfları: Fare elemanı üzerinde süpürdü burada da etkisini koyabilirsiniz böylece

.myClass { 
    width:280px; 
    height:228px; 
} 

.myClass:hover { 
    //css effects here 
} 

:hover sadece geçerli olacaktır.

1
Jquery ile

ve mouseenter ve mouseleave:

$(".someClass") 
    .mouseenter(function() { 
     console.log("Enter to "+$(this)); 
    }) 
    .mouseleave(function() { 
     console.log("Leave to "+$(this)); 
}); 

https://api.jquery.com/mouseleave/

https://api.jquery.com/mouseenter/

DÜZENLEME bu deneyin:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<a href="{{ action('Test\\[email protected]', [1]) }}"> 
    <img src="/pictures/Gaming.jpg" class="test" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\[email protected]', [2]) }}"> 
    <img src="/pictures/Gesundheit.jpg" class="test" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<script> 
    $(".test") 
     .mouseenter(function() { 
      alert("Enter to img src "+$(this).attr("src")); 
    }) 
    .mouseleave(function() { 
     alert("Leave to img src "+$(this).attr("src")); 
    }); 
</script> 
01 Eğer img``idem when you leave img`

ait imgalert ekran kaynağına girmek Yoksa ne zaman kullanabileceğini

Yani: hover

$(".someClass").hover(function() { 
    alert("Hover on "+$(this).attr("src")); 
}); 
+0

öhhm .. Bunu html kodumla nasıl kullanabileceğimi söyleyebilir misiniz? Çünkü ben bu sözdizimini anlamıyorum: o – ItzeMe

+0

Her 'img'ye' class 'ekleyebilirsiniz, img'nize fare girdiğinizde bazı efektler yapabilirsiniz ve siz çıktıktan sonra etkisini kaldırın. – simon

+0

jquery kodunun dışında bir

İlgili konular