2016-01-09 63 views
0

我可以知道如何更改圖像以及文字內部圖像的位置嗎?當我將圖片懸停下來,但不是文字。圖像正常工作,但不是文字。onhover將圖像和文字位置向下和向上移動到初始位置?

小提琴:

h2 { 
    position:fixed; 
    margin-top:40px; 
    left: 50; 

    z-index:100; 
height:100%; 
} 
h2:hover{ 
    position: relative; 
    margin-top:-50px; 
    left: 50; 
} 

https://jsfiddle.net/mjLLgce7/1/

請幫助我。由於

+0

檢查jsfidle here https://jsfiddle.net/mjLLgce7/1/ –

+0

如果我理解正確,試試這個:a:hover h2 {margin-top:50px} – Hobroker

+1

有ma你的腳本有問題。在某些鼠標位置上,圖像會自行上下移動。 –

回答

0

非常錯誤代碼這將是不可能沒有的CSS樣式

一些重大變化(我儘量不碰你的腳本!)

h2 { 
 
margin:0px; 
 
    line-height:none; 
 

 
} 
 

 
    a{ 
 
    vertical-align:top; 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 
a:hover{ 
 
    top:50px; 
 
}
<script> 
 
function b1(x1) { 
 
    x1.style.height = "140px"; 
 
    x1.style.width = "120px"; 
 
} 
 

 
function s1(x2) { 
 
    x2.style.height = "100px"; 
 
    x2.style.width = "120px"; 
 
} 
 

 
function b2(x3) { 
 
    x3.style.height = "140px"; 
 
    x3.style.width = "120px"; 
 
} 
 

 
function s2(x4) { 
 
    x4.style.height = "100px"; 
 
    x4.style.width = "120px"; 
 
} 
 

 
function b3(x5) { 
 
    x5.style.height = "140px"; 
 
    x5.style.width = "120px"; 
 
} 
 

 
function s3(x6) { 
 
    x6.style.height = "100px"; 
 
    x6.style.width = "120px"; 
 
} 
 

 
function b4(x7) { 
 
    x7.style.height = "140px"; 
 
    x7.style.width = "120px"; 
 
} 
 

 
function s4(x8) { 
 
    x8.style.height = "100px"; 
 
    x8.style.width = "120px"; 
 
} 
 

 
function b5(x9) { 
 
    x9.style.height = "140px"; 
 
    x9.style.width = "120px"; 
 
} 
 

 
function s5(x) { 
 
    x.style.height = "100px"; 
 
    x.style.width = "120px"; 
 
} 
 

 
function b6(x12) { 
 
    x12.style.height = "140px"; 
 
    x12.style.width = "120px"; 
 
} 
 

 
function s6(x12) { 
 
    x12.style.height = "100px"; 
 
    x12.style.width = "120px"; 
 
} 
 
</script> 
 

 

 
<a href="#"> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b1(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/why-study.png" onmouseout="s1(this)" alt="study"/> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b2(this)" onmouseout="s2(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/graduate.png" alt="graduate"/> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b3(this)" onmouseout="s3(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/pg.png" alt="pg" /> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b4(this)" onmouseout="s4(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/pre-university.png" alt="pre-uni"/> 
 
</a>

+0

http://www.regent-college.edu/檢查這一側右上角菜單我想要類似類型的懸停動作,這是我的jsfiddle https://jsfiddle.net/mjLLgce7/1/ –

相關問題