Question

我正在尝试设计一个悬停在效果上的导航菜单，文本将替换为svg。

我想用鼠标移除时的svg替换列表项元素中的文本，例如

<svg height="110" width="110">
<ellipse cx="55" cy="55" rx="50" ry="50" 
style="fill:crimson;stroke:black;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

我知道你必须使用jQuery，但就我所理解的那样。

你会怎么做呢？

Answer 1

试试这个，

JsFiddle

$text = ''
$( "a" )
  .mouseenter(function() {
  $text = $( this ).find( "li" ).text()
    $( this ).find( "li" ).html('<svg height="110" width="110"><ellipse cx="55" cy="55" rx="50" ry="50" style="fill:crimson;stroke:black;stroke-width:5;fill-rule:evenodd;" />Sorry, your browser does not support inline SVG.</svg>');
  })
  .mouseleave(function() {
    $( this ).find( "li" ).text( $text);
  });

Answer 2

您可以在不使用jquery的情况下执行此操作

这是示例

<强> HTML

<li>About<svg height="110" width="110">
<ellipse cx="55" cy="55" rx="50" ry="50" 
style="fill:crimson;stroke:black;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg></li>

<强> CSS

 svg { position:absolute; left:0; top:0; opacity:0}
    nav li:hover svg { opacity:1}

小提琴http://jsfiddle.net/krunalp1993/nCcs7/3/

希望它可以帮助你：）

Answer 3

不需要jQuery，只需将它们包含在常用元素中并使用:hover来确定要执行的操作

nav li:hover .text {
    display: none;
}
nav li:hover .svg {
    display: inline-block;
}
nav li .svg {
    display: none;
}

http://jsfiddle.net/nCcs7/4/

你可能想稍微修改一下这些风格，但你会得到它的要点。最简单的方法。

Answer 4

好的，在我批评了一些答案之后，我会发布我的提案：JSFiddle

首先我更正了无效的HTML标记其次，我将SVG放到CSS中，将其用作背景图像。

（Base64编码）SVG的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet" viewBox="0 0 110 110">
<ellipse cx="55" cy="55" rx="50" ry="50" fill="crimson" stroke="black" stroke-width="5" fill-rule="evenodd" />
</svg>

我想用listove上的svg替换list item元素中的文本

不，你不会......！ ;-)
相反，您希望在悬停时使链接元素<a>透明。通过这样做，您可以为列表项<li>设置所需的背景颜色和图像。

如果我没有错过任何东西，那就是它希望它有所帮助。

PS：处理SVG时，这里只有两个链接FYI - http://css-tricks.com/using-svg/
- http://css-tricks.com/svg-fallbacks/

在鼠标悬停期间如何在导航菜单中显示svg？

4 个答案: