如何改變圖像的透明度，當我將鼠標懸停我的文字嗎？

我是新來的HTML和CSS，我有my own website。的問題是，我不知道如何改變不透明度，當我將鼠標懸停在我的文字。如果我將鼠標懸停在右側菜單中的文字上，我希望它變得更輕。現在，當我將鼠標懸停在圖片本身這只是改變，文字也發生了變化，但我希望它在同一時間和同一對象上都變化，所以我將鼠標懸停在文本;文字變化和圖像不透明度的變化。如何改變圖像的透明度，當我將鼠標懸停我的文字嗎？

這裏是我的代碼：

@import url(http://fonts.googleapis.com/css?family=Roboto:100); 
 
@import url(http://fonts.googleapis.com/css?family=Roboto:300); 
 
* { 
 
\t -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
\t -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
\t box-sizing: border-box; 
 
} 
 
html, body { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background-image: url(lucafraserProject/images/backgroundImage.png); 
 
\t background-repeat: repeat; 
 
} 
 
#container { 
 
\t width: 100%; 
 
\t height: 1000px; 
 
} 
 
#header { 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t background-position: 50% 50%; 
 
\t background-color: #000; 
 
\t color: #FFF; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t text-align: center; 
 
\t font-size: 45px; 
 
\t box-shadow: 3px 3px 5px 3px #ccc; 
 
} 
 
#aboutMe { 
 
\t width: 50%; 
 
\t height: auto; 
 
\t background-color: #FFF; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t color: #333333; 
 
\t line-height: 2; 
 
\t margin-top: 50px; 
 
\t padding-top: 25px; 
 
\t padding-bottom: 25px; 
 
\t padding-left: 36px; 
 
\t padding-right: 36px; 
 
\t box-shadow: 3px 3px 5px 3px #ccc; 
 
\t float: left; 
 
} 
 
#footer { 
 
\t width: 100%; 
 
\t color: #333333; 
 
\t text-align: center; 
 
\t display: block; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t padding-bottom: 10px; 
 
\t padding-top: 10px; 
 
\t float: left; 
 
} 
 
.aboutMe { 
 
\t font-size: 20px; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
.h2AboutMe { 
 
\t font-size: 40px; 
 
\t padding-bottom: 1px; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
.h1Header { 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
\t padding-top: 40px; 
 
\t padding-bottom: 50px; 
 
} 
 
#menuLinks { 
 
\t background-color: #FFF; 
 
\t height: auto; 
 
\t width: 21%; 
 
\t float: left; 
 
\t padding: 25px 36px; 
 
\t overflow: hidden; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t color: #333333; 
 
\t line-height: 2; 
 
\t margin: auto; 
 
\t padding-top: 25px; 
 
\t padding-bottom: 25px; 
 
\t padding-left: 36px; 
 
\t padding-right: 36px; 
 
\t margin-top: 50px; 
 
\t box-shadow: 3px 3px 5px 3px #ccc; 
 
} 
 
.h2Menu { 
 
\t font-size: 40px; 
 
\t padding-bottom: 1px; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
#menuRechts { 
 
\t background-color: #FFF; 
 
\t height: auto; 
 
\t width: 21%; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t color: #333333; 
 
\t line-height: 2; 
 
\t margin: auto; 
 
\t padding-top: 25px; 
 
\t padding-bottom: 25px; 
 
\t padding-left: 36px; 
 
\t padding-right: 36px; 
 
\t margin-top: 50px; 
 
\t box-shadow: 3px 3px 5px 3px #ccc; 
 
} 
 
li { 
 
\t text-decoration: none; 
 
\t list-style-type: none; 
 
\t margin-left: -40px; 
 
\t vertical-align: middle; 
 
\t margin-top: 10px; 
 
} 
 
a { 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
\t color: #000; 
 
} 
 
a:hover { 
 
\t text-decoration: none; 
 
\t font-size: 40px; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
\t color: #000; 
 
\t font-weight: bold; 
 
} 
 
#menuLinks li ul { 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
} 
 
.marginClassP { 
 
\t margin-top: -50px; 
 
} 
 
.marginLeft { 
 
\t margin-left: 10px; 
 
\t font-size: 20px; 
 
} 
 
.mainMenu { 
 
\t font-size: 20px; 
 
} 
 
#widespace { 
 
\t width: 2%; 
 
\t height: 500px; 
 
\t float: left; 
 
} 
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
 
body { 
 
} 
 
} 
 
/* Smartphones (portrait) ----------- */ 
 
@media only screen and (max-width : 320px) { 
 
/* Styles */ 
 
} 
 
/*1210px = follow me lelijk = new css, tablet device, mobile width = */ 
 

 
.pic { 
 
\t opacity: 1; 
 
\t filter: alpha(opacity=100);; 
 
} 
 
.pic:hover { 
 
\t opacity: 0.3; 
 
\t filter: alpha(opacity=30); 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>lucafraser.nl</title> 
 
<link href="indexCSS.css" rel="stylesheet" type="text/css" /> 
 
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'> 
 
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
    <div id="header"> 
 
    <h1 class="h1Header">Welcome</h1> 
 
    </div> 
 
    <div id="widespace"></div> 
 
    <div id="menuLinks"> 
 
    <h2 class="h2Menu">Menu</h2> 
 
    <ul> 
 
     <li><a href=""><span class="mainMenu">Home</span></a></li> 
 
     <li><a href=""><span class="mainMenu">About</span></a></li> 
 
     <li><a href=""><span class="mainMenu">Portfolio</span></a></li> 
 
     <li><a href=""><span class="mainMenu">Results</span></a></li> 
 
     <li><a href=""><span class="mainMenu">News</span></a></li> 
 
     <li><a href=""><span class="mainMenu">Blog</span></a></li> 
 
     <li><a href=""><span class="mainMenu">Contact</span></a></li> 
 
    </ul> 
 
    </div> 
 
    <div id="widespace"></div> 
 
    <div id="aboutMe"> 
 
    <h2 class="h2AboutMe">Home</h2> 
 
    <p class="aboutMe">I am trying to get this website to work on mobile devices. After that I will continue creating my website and I will be inserting pages with content. Also, I am trying to get the font-type I use to work for everyone so you don't see the ugly standard font-type. Thanks for your patience!<br />Update: The font is working now! I hope it's readable :D</p> 
 
    </div> 
 
    <div id="widespace"></div> 
 
    <div id="menuRechts"> 
 
    <h2 class="h2Menu">Follow me</h2> 
 
    <ul> 
 
     <li><img src="lucafraserProject/images/48x48/facebook-48.png" style="vertical-align:middle" class="pic"/><a href="https://www.facebook.com/luca.fraser.9" target="_blank"><span class="marginLeft">Facebook</span></a></li> 
 
     <li><img src="lucafraserProject/images/48x48/twitter-48.png" style="vertical-align:middle" class="pic"/><a href="https://twitter.com/xDivooo" target="_blank"><span class="marginLeft">Twitter</span></a></li> 
 
     <li><img src="lucafraserProject/images/48x48/googleplus-48.png" style="vertical-align:middle" class="pic"/><a href="https://plus.google.com/1/posts" target="_blank"><span class="marginLeft">Google+</span></a></li> 
 
     <li><img src="lucafraserProject/images/48x48/email-48.png" style="vertical-align:middle" class="pic"/><a href="mailto:[email protected]" target="_blank"><span class="marginLeft">Gmail</span></a></li> 
 
     <li><img src="lucafraserProject/images/48x48/instagram-48.png" style="vertical-align:middle" class="pic"/><a href="https://instagram.com/lucafraser16" target="_blank"><span class="marginLeft">Instagram</span></a></li> 
 
     <li><img src="lucafraserProject/images/48x48/youtube-48.png" style="vertical-align:middle" class="pic"/><a href="https://www.youtube.com/channel/UCUOgvY0q2C-GUOLVEhk5RbA" target="_blank"><span class="marginLeft">YouTube</span></a></li> 
 
    </ul> 
 
    </div> 
 
    <div id="widespace"></div> 
 
    <div id="footer"> 
 
    <p>Copyright © Luca Fraser. Alle rechten voorbehouden.</p> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2015-03-31 Lucafraser

應該是這樣的parent:hover child {opacity:0.3;}

這裏使用下面的CSS代碼example 。

來源

2015-03-31 12:49:50

取而代之的將懸停效果，當鼠標懸停在a或.pic應用它，當你將鼠標懸停包含li元素他們對。

#menuRechts li:hover .pic{ 
    opacity:0.3 
} 
#menuRechts li:hover a{ 
    font-weight:bold; 
}

來源

2015-03-31 12:47:27

你總是可以讓我們的CSS僞類

img:hover{ 

opacity : 0.5; 
}

這將減少50％每幅圖像的不透明度，你可以使用任何HTML元素，CSS類或ID而不是IMG

的

你可以給0-1 1爲總可見光和0是完全透明

來源

2015-03-31 12:49:22 ahhmarr

至於你提到之間的任意值，你知道HTML和CSS，請將C在鏈接父即UL姑娘見下面的例子

<ul class="side-links">

然後在樣式文件

.side-links li:hover{ opacity:0.3}

完成

來源

2015-03-31 12:49:37

好了它的工作，現在，我已經加上你的代碼！非常感謝你！還有一個問題..使用我的文字時，我在它懸停改變，但它像圖像不透明度變化的文字，我怎樣才能得到它回到=黑體文本將鼠標懸停在？ – Lucafraser 2015-04-01 06:38:44

添加此CSS：

#menuRechts li:hover { 
opacity: 0.5;

}

並刪除.PIC：懸停代碼。這將使整個LI元素淡出，因爲它包含圖像和文本，所以不需要單獨做兩件事情。

來源

2015-03-31 12:50:00 BobbyTables

Try to this code... 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
img { 
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
} 

img:hover { 
opacity: 1.0; 
filter: alpha(opacity=100); /* For IE8 and earlier */ 
} 
</style> 
</head> 
<body> 

<h1>Image Transparency</h1> 
<img src="klematis.jpg" width="150" height="113" alt="klematis"> 
<img src="klematis2.jpg" width="150" height="113" alt="klematis"> 

<p><b>Note:</b> In IE, a !DOCTYPE must be added for 
the :hover selector to work on other elements than the a element.</p> 
</body> 
</html>

來源

2015-03-31 12:51:02

如何改變圖像的透明度，當我將鼠標懸停我的文字嗎？

回答

相關問題