Change span content when hovering over various links

Question

Jon_7 0 Light Poster

7 Years Ago

I'm trying to have a sentence at the base of my site that says how many langauges our members speak. I simply want that sentence to change from English to whichever language is hovered over. Can someone help me out? Thanks!

<style>

.languages {
    font-size: 70%;
    text-decoration:none;
}
.languages a{
    text-decoration:none;
    margin-left:2px;
    margin-right:2px;
    background-color:#ffffff;
    border: white solid 2px;
    padding: 2px 4px;
}
.languages a:hover{
    background-color:#fff000;
    border: gray solid 2px;
}

.default{
    font-size: 80%;
    font-weight:bold;
    letter-spacing:1px;
    font-family:arial;
}

</style>

<center>
<span class="default">Our players represent a variety of backgrounds, countries, and languages.</span> <br><br>

<span class="languages">
<a href="#" id="English" title="Our players represent a variety of backgrounds, countries, and languages.">English</a> • 
<a href="#" id="Chinese" title="我們的球員代表了各種背景，國家和語言。">中文</a> • 
<a href="#" id="Spanish" title="Nuestros jugadores representan una variedad de fondos, países e idiomas.">Español</a> • 
<a href="#" id="Russian" title="Наши игроки представляют различные фоны, стран и языков.">русский</a> • 
<a href="#" id="German" title="Unsere Spieler repräsentieren eine Vielzahl von Hintergründen, Ländern und Sprachen.">Deutsche</a> • 
<a href="#" id="Ukrainian" title="Наші гравці представляють різні фони, країн і мов.">український</a> • 
<a href="#" id="Korean" title="플레이어는 다양한 배경, 국가 및 언어를 대표합니다.">한국어</a>
</span>

</center>

css javascript jquery

2 Contributors
5 Replies
350 Views
2 Hours Discussion Span
Latest Post 7 Years Ago Latest Post by gentlemedia

All 5 Replies

gentlemedia 803 Master Poster

7 Years Ago

There is a pure css solution if you use custom data-attributes.

HTML:

<ul>
  <li lang="es" data-lang="Nuestros jugadores representan una variedad de fondos, países e idiomas.">Español</li>
  <li lang="zh" data-lang="我們的球員代表了各種背景，國家和語言。">中文</li>
</ul>

CSS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li[data-lang] {
  margin-bottom: .5rem;;
  cursor: pointer;
}

li[data-lang]:hover::after {
  content: " " attr(data-lang);
  cursor: default;
}

Little demo: http://codepen.io/gentlemedia/pen/rjWBKB

EDIT:
I just see your second post now and see also that you wanted something else :) In that case you'll need indeed javascript, but that can be indeed much cleaner and efficient then you have now. Will have a look when I have some more time then now.

Edited 7 Years Ago by gentlemedia

Jon_7 commented: Thanks. Is there any way to also include a way for mobile users to click instead of hover? +0

gentlemedia 803 Master Poster

7 Years Ago

Sorry I don't have time to look at it now, but you could use the data attribute as well for your jQuery something like this:

var $default = $('.default').html();

$('li[data-lang]').on('mouseenter', function () {
  $('.default').html($(this).data(lang));
}).on('mouseleave', function () {
  $('.default').html($default)
});

Untested, but perhaps you can figure it out for yourself with this or someone else could chime in from here.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Thanks. Is there any way to also include a way for mobile users to click instead of hover?

Jon_7 0 Light Poster · Answer 1 · 2017-01-16T22:18:42+00:00

After posting, I came across a link that helped. My solution is below, but feel free to add a cleaner solution if you know of one. Thanks!

<style>
.languages {
    font-size: 70%;
    text-decoration:none;
}
.languages a{
    text-decoration:none;
    margin-left:2px;
    margin-right:2px;
    background-color:#ffffff;
    border: white solid 2px;
    padding: 2px 4px;
}
.languages a:hover{
    background-color:#fff000;
    border: gray solid 2px;
}
.default{
    font-size: 80%;
    font-weight:bold;
    letter-spacing:1px;
    font-family:arial;
}
</style>

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script type='text/javascript'>

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".English").html();
$("a.Englishlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Chinese").html();
$("a.Chineselink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Spanish").html();
$("a.Spanishlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Russian").html();
$("a.Russianlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".German").html();
$("a.Germanlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Ukrainian").html();
$("a.Ukrainianlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Korean").html();
$("a.Koreanlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

</script>

<center>
<div class="original"><p class="default">Our players represent a variety of backgrounds, countries, and languages.</p></div> 
<p class="English" hidden="hidden">Our players represent a variety of backgrounds, countries, and languages.</p>
<p class="Chinese" hidden="hidden">我們的球員代表了各種背景，國家和語言。</p>
<p class="Spanish" hidden="hidden">Nuestros jugadores representan una variedad de fondos, países e idiomas.</p>
<p class="Russian" hidden="hidden">Наши игроки представляют различные фоны, стран и языков.</p>
<p class="German" hidden="hidden">Unsere Spieler repräsentieren eine Vielzahl von Hintergründen, Ländern und Sprachen.</p>
<p class="Ukrainian" hidden="hidden">Наші гравці представляють різні фони, країн і мов.</p>
<p class="Korean" hidden="hidden">플레이어는 다양한 배경, 국가 및 언어를 대표합니다.</p>

<span class="languages">
<a href="#" class="Englishlink">English</a> • 
<a href="#" class="Chineselink">中文</a> • 
<a href="#" class="Spanishlink">Español</a> • 
<a href="#" class="Russianlink">русский</a> • 
<a href="#" class="Germanlink">Deutsche</a> • 
<a href="#" class="Ukrainianlink">український</a> • 
<a href="#" class="Koreanlink">한국어</a>
</span>
</center>

  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "42gV5"
    }], "*")
  }
</script>

Jon_7 0 Light Poster · Answer 2 · 2017-01-16T23:24:04+00:00

Your way is smooth, although not exactly what I need. My main issue now is finding a way for mobile users to click instead of hover? Also, the click takes them to the top of the page... so I'd need that to stop as well.

Thanks a ton for the help.

Jon_7 0 Light Poster · Answer 3 · 2017-01-16T23:52:13+00:00

I'm on fire today! I think I figured it out again. Before I mark as "solved", though, I'll wait just in case someone has something much simpler. Here's what I've got so far, but I SUCK at coding... so whatever.

<style>
.languages {
    font-size: 70%;
    text-decoration:none;
    color:#000099:
}
.languages a{
    text-decoration:none;
    margin-left:2px;
    margin-right:2px;
    background-color:#ffffff;
    border: white solid 2px;
    padding: 2px 4px;
    color:#000099:
}
.languages a:hover{
    background-color:#fff000;
    border: gray solid 2px;
    cursor:context-menu;
    color:#990000:
}
.default{
    font-size: 80%;
    font-weight:bold;
    letter-spacing:1px;
    font-family:arial;
}
</style>

<script type='text/javascript'>

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".English").html();
$("a.Englishlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Chinese").html();
$("a.Chineselink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Spanish").html();
$("a.Spanishlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Russian").html();
$("a.Russianlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".German").html();
$("a.Germanlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Ukrainian").html();
$("a.Ukrainianlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

//<![CDATA[
$(window).load(function(){
var old = $(".default").html();
var now = $(".Korean").html();
$("a.Koreanlink").hover(function(){
    $(".default").html(now);
}, function(){
    $(".default").html(old);
});
});//]]>  

</script>

<center>
<div class="original"><p class="default">Our players represent a variety of backgrounds, countries, and languages.</p></div> 
<p class="English" hidden="hidden">Our players represent a variety of backgrounds, countries, and languages.</p>
<p class="Chinese" hidden="hidden">我們的球員代表了各種背景，國家和語言。</p>
<p class="Spanish" hidden="hidden">Nuestros jugadores representan una variedad de fondos, países e idiomas.</p>
<p class="Russian" hidden="hidden">Наши игроки представляют различные фоны, стран и языков.</p>
<p class="German" hidden="hidden">Unsere Spieler repräsentieren eine Vielzahl von Hintergründen, Ländern und Sprachen.</p>
<p class="Ukrainian" hidden="hidden">Наші гравці представляють різні фони, країн і мов.</p>
<p class="Korean" hidden="hidden">플레이어는 다양한 배경, 국가 및 언어를 대표합니다.</p>

<span class="languages">
<a class="Englishlink">English</a> • 
<a class="Chineselink">中文</a> • 
<a class="Spanishlink">Español</a> • 
<a class="Russianlink">русский</a> • 
<a class="Germanlink">Deutsche</a> • 
<a class="Ukrainianlink">український</a> • 
<a class="Koreanlink">한국어</a>
</span>
</center>

  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "42gV5"
    }], "*")
  }
</script>

Change span content when hovering over various links

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers