Javascript 如何更改悬停时的图像和文本

我正在尝试更改悬停时的图像和文本，我已经得到了，但它似乎不起作用

$（“.service_1”）.hover（函数（）{
$（“.hello”）.hide（）；
$（“.text”）.append（“追加文本”）；
});
.service\u项目img{
位置：绝对位置；
}
.服务项目{
高度：307px；
宽度：700px；
背景尺寸：封面；
过渡：背景图像0.5s线性；
-webkit过渡：背景图像0.5s线性；
浮动：左；
位置：相对位置；
}
.服务项目：悬停{
过渡：背景图像0.5s线性；
-webkit过渡：背景图像0.5s线性；
}
.服务{
利润上限：66px；
高度：949px；
}
.服务项目a{
身高：50%；
显示：块；
文本对齐：居中；
字体大小：30px；
颜色：#fff；
文本转换：大写；
位置：相对位置；
}
.服务项目img{
位置：绝对位置；
左：0px；
宽度：100%；
高度：300px；
过渡：不透明度。5s缓解；
}
.服务项目img：悬停{
不透明度：0；
}
.服务项目跨度{
位置：绝对位置；
底部：0；
右：0；
左：0；
文本对齐：居中；
}

Css可以处理您试图实现的目标。下面是一个使用
css转换
和
flex-box
对齐文本的工作示例：


.service\u项目img{
位置：绝对位置；
z指数：-1；
}
.服务项目{
高度：307px；
宽度：700px；
浮动：左；
位置：相对位置；
}
.服务{
利润上限：66px；
高度：949px；
}
.服务项目a{
高度：307px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
文本对齐：居中；
字体大小：30px；
颜色：#fff；
文本转换：大写；
}
.服务项目img{
位置：绝对位置；
左：0px；
宽度：100%；
高度：300px；
过渡：不透明度。5s缓解；
}
.服务项目：悬停img:类型的最后一个{
不透明度：0；
}
.service_项：悬停。追加文本{
不透明度：1；
}
.追加文本{
不透明度：0；
}

欢迎来到StackOverflow。发布问题时，请记住在问题中包含代码本身，而不是简单地将其链接到外部服务。您可能还意识到，如果不发布代码，您就无法发布链接：该规则旨在确保StackOverflow上的问题能够自行解决。虽然此代码片段可以解决问题，但确实有助于提高您发布的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！从下一站开始，我们一定会在Rorymcrossan做到这一点。前端不是我的工作领域。在我的大学项目中实施过一次，所以请记住。无论如何，谢谢你指出：）
<a href="#">
<img src="http://www.dummy.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://www.dummy.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://www.dummy.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>