悬停文本时如何更改图像的不透明度？答案

【问题标题】：How do I change the opacity of an image when I hover of my text?悬停文本时如何更改图像的不透明度？
【发布时间】：2015-06-04 19:28:14
【问题描述】：

我是 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);
* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
html, body {
	padding: 0;
	margin: 0;
	background-image: url(lucafraserProject/images/backgroundImage.png);
	background-repeat: repeat;
}
#container {
	width: 100%;
	height: 1000px;
}
#header {
	width: 100%;
	height: 200px;
	background-position: 50% 50%;
	background-color: #000;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	font-size: 45px;
	box-shadow: 3px 3px 5px 3px #ccc;
}
#aboutMe {
	width: 50%;
	height: auto;
	background-color: #FFF;
	font-family: 'Roboto', sans-serif;
	color: #333333;
	line-height: 2;
	margin-top: 50px;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 36px;
	padding-right: 36px;
	box-shadow: 3px 3px 5px 3px #ccc;
	float: left;
}
#footer {
	width: 100%;
	color: #333333;
	text-align: center;
	display: block;
	font-family: 'Roboto', sans-serif;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
	padding-top: 10px;
	float: left;
}
.aboutMe {
	font-size: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.h2AboutMe {
	font-size: 40px;
	padding-bottom: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.h1Header {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 40px;
	padding-bottom: 50px;
}
#menuLinks {
	background-color: #FFF;
	height: auto;
	width: 21%;
	float: left;
	padding: 25px 36px;
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	color: #333333;
	line-height: 2;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 36px;
	padding-right: 36px;
	margin-top: 50px;
	box-shadow: 3px 3px 5px 3px #ccc;
}
.h2Menu {
	font-size: 40px;
	padding-bottom: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#menuRechts {
	background-color: #FFF;
	height: auto;
	width: 21%;
	float: left;
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	color: #333333;
	line-height: 2;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 36px;
	padding-right: 36px;
	margin-top: 50px;
	box-shadow: 3px 3px 5px 3px #ccc;
}
li {
	text-decoration: none;
	list-style-type: none;
	margin-left: -40px;
	vertical-align: middle;
	margin-top: 10px;
}
a {
	text-decoration: none;
	list-style: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	font-size: 40px;
	font-family: 'Roboto', sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #000;
	font-weight: bold;
}
#menuLinks li ul {
	text-decoration: none;
	list-style: none;
}
.marginClassP {
	margin-top: -50px;
}
.marginLeft {
	margin-left: 10px;
	font-size: 20px;
}
.mainMenu {
	font-size: 20px;
}
#widespace {
	width: 2%;
	height: 500px;
	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 {
	opacity: 1;
	filter: alpha(opacity=100);;
}
.pic:hover {
	opacity: 0.3;
	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/101233334966337926037/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:lucaf1997@gmail.com" 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>

【问题讨论】：

标签： css html image hover

【解决方案1】：

正如您提到的，您知道 html 和 css，请在链接父级上添加类，即 ul 参见下面的示例

<ul class="side-links">

然后在样式文件中使用下面的css

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

完成

【讨论】：

好的，它现在可以工作了，我已经添加了你的代码！非常感谢！还有一个问题.. 当我将鼠标悬停在它上面时，我的文本过去会发生变化，但是它的不透明度文本会像图像一样发生变化，我怎样才能让它重新悬停在 = 粗体文本上？

【解决方案2】：

应该是这样的parent:hover child {opacity:0.3;}

这里是代码example。

【讨论】：

【解决方案3】：

当您将鼠标悬停在 a 或 .pic 上时应用悬停效果，而不是应用悬停效果，而是将鼠标悬停在它们包含的 li 元素上。

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

【讨论】：

【解决方案4】：

你总是可以让我们使用 css 伪类

img:hover{

 opacity : 0.5;
}

这会将每张图片的不透明度降低 50%，您可以使用任何 html 元素、css 类或 id 代替 img

你可以给出 0-1 之间的任何值 1 完全可见，0 完全透明

【讨论】：

【解决方案5】：

添加这个 CSS：

#menuRechts li:hover {
opacity: 0.5;

}

并删除 .pic:hover 代码。这将使整个 LI 元素淡出，因为它同时包含图像和文本，因此无需分别做这两件事。

【讨论】：

【解决方案6】：

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>

【讨论】：