I have this website which I'm attempting to work on. I've obtained a template, which I'm editing the HTML to customize. There exists a section on the page that has three icons with a "More" button beneath them. I've set the button to link to another webpage, but it only works on IE -- not Chrome. Further, the icons themselves are supposed to change as you hover, which again they do in IE but not in chrome.
I have this code:
.intro3 {
text-align: center;
color: $(intro3.color);
}
.intro3 .row {
width: 90%;
margin: 0 auto;
padding: 120px 0 120px 50px;
}
.images_author {
font-size: 6em;
}
.images_author span {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
color: $(intro3.circle.right);
border-width: 40px;
border-style: solid;
border-radius: 100%;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.right);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.left);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.authsx:hover .images_author span {
color: $(background.color.all);
border-style: double;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.left);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.right);
}
.intro3 .fourcol div.padd_25 {
padding: 25px;
}
.intro3 .fourcol div strong {
font: normal normal 22px PT Serif,serif;
line-height: 1.8em;
}
.intro3 .fourcol p a.more_aut {
font-size: 12px;
margin: 10px 0 10px 0;
display: inline-block;
padding: 10px 30px;
background: transparent;
color: $(intro3.color);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border: 2px solid $(intro3.color);
border-radius: 6px;
opacity: 0.6;
}
Which sets up for the (where the action is executed):
<div class='intro3'>
<div class='row'>
<h2 class='title_s authors'> Explore </h2>
<div class='fourcol authsx'>
<div class='images_author coll_1'>
<span class='icon fa fa-linkedin'/>
</div>
<div class='padd_25'>
<strong>LinkedIn Profile</strong>
<p>Connect via LinkedIn. See my skills, experience, and qualifications.</p>
<p><a class='more_aut' href='http://www.linkedin.com/in/amandabayless'><span>More</span></a></p>
</div>
</div>
<div class='fourcol authsx'>
<div class='images_author coll_2'>
<span class='icon fa fa-user'/>
</div>
<div class='padd_25'>
<strong>About Me</strong>
<p>Learn more about me. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
<div class='fourcol last authsx'>
<div class='images_author coll_3'>
<span class='icon fa fa-paperclip'/>
</div>
<div class='padd_25'>
<strong>Samples of Work</strong>
<p>See a small sample of my work. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
</div>
I only have very rudimentary skills here, and much internet sleuthing could not show me why there was a difference in the browser. For reference, This is the website. Could anyone offer advice? I don't know where to go from here.
Inside #page-content there is an element with class intro3 which has a pseudo element :after. The pseudo element overlays your links. Give it a lower z-index or remove it if you do not need it.
Related
I have created the code snippet and the buttons should slide up and down by click but that doesn't happen for some reason. Does it look like some subtle syntax error? Please let me know if I need to provide some extra information.
Can some one please guide me why my script is not working?
Thanks in advance.
My code is here:
(function() {
'use strict';
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
}(window, document));
body {
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
}
.accordionWrapper {
padding: 30px;
background: #fff;
float: left;
width: 80%;
box-sizing: border-box;
margin: 10%;
box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}
.accordionItem {
float: left;
display: block;
width: 100%;
box-sizing: border-box;
font-family: 'Open-sans', Arial, sans-serif;
}
.accordionItemHeading {
cursor: pointer;
margin: 0px 0px 10px 0px;
padding: 10px;
background: #2980b9;
color: #fff;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
}
.close .accordionItemContent {
height: 0px;
transition: height 1s ease-out;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float: left;
display: block;
}
.open .accordionItemContent {
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display: block;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
transition: transform 0.4s ease;
box-sizing: border-box;
}
.open .accordionItemHeading {
margin: 0px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottom-right: 0px;
-moz-border-radius-bottom-left: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #bdc3c7;
color: #7f8c8d;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordionWrapper">
<div class="accordionItem open">
<h2 class="accordionItemHeading">About accordions</h2>
<div class="accordionItemContent">
<p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
<p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">Accordion items</h2>
<div class="accordionItemContent">
<p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
<p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>
</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">How to use a JavaScript accordion</h2>
<div class="accordionItemContent">
<p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
When you transition your code from "sloppy mode", which is a no strict mode, to the strict mode than previously some mistakes, which were acceptable in the sloppy mode are treated as an error on the strict mode.
This is why your code was not working.
Mistake:
"i",. the variable used in the loop was not defined and was treated as
an error in the strict mode.
Debugging in console was giving this error:
"message": "Uncaught ReferenceError: i is not defined",
Solution→
for (i = 0; i < accHD.length; i++)
should be changed to
for (var i = 0; i < accHD.length; i++)
or
for (let i = 0; i < accHD.length; i++)
I also wish to clarify that as let is block scoped, these are two different variables (just with the same name). You could also call the second one j to avoid confusion.
this image will clear your doubts further →
Suggested Further readings
I will also suggest you that you understand few concepts moving forward.
suggested reading #1
suggested reading #2
Also study closure
Additionally,
You can read in detail about strict mode here on this page.
You're missing the i var declaration in the for loops as stated in the error
"message": "Uncaught ReferenceError: i is not defined",
To solve it, declare i var inside the for-loop
for (var i = 0; i < accHD.length; i++) {
Working code: https://jsfiddle.net/q8pyfem8/
(function() {
'use strict';
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (var i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (var i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
}(window, document));
body {
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
}
.accordionWrapper {
padding: 30px;
background: #fff;
float: left;
width: 80%;
box-sizing: border-box;
margin: 10%;
box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}
.accordionItem {
float: left;
display: block;
width: 100%;
box-sizing: border-box;
font-family: 'Open-sans', Arial, sans-serif;
}
.accordionItemHeading {
cursor: pointer;
margin: 0px 0px 10px 0px;
padding: 10px;
background: #2980b9;
color: #fff;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
}
.close .accordionItemContent {
height: 0px;
transition: height 1s ease-out;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float: left;
display: block;
}
.open .accordionItemContent {
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display: block;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
transition: transform 0.4s ease;
box-sizing: border-box;
}
.open .accordionItemHeading {
margin: 0px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #bdc3c7;
color: #7f8c8d;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordionWrapper">
<div class="accordionItem open">
<h2 class="accordionItemHeading">About accordions</h2>
<div class="accordionItemContent">
<p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
<p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">Accordion items</h2>
<div class="accordionItemContent">
<p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
<p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>
</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">How to use a JavaScript accordion</h2>
<div class="accordionItemContent">
<p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
I would like to prevent a toggle event inside an iframe from causing the parent page to jump up to the top when clicked.
The child page does not do that by itself thanks to the following code below. However, when I interact with it while inside an iframe; the same child page causes the parent with the iframe to jumps up to the top when I click on the toggle button in the child page.
I used:
return false;
evt.preventDefault();
evt.stopPropagation();
And they work fine if I was looking at the child page by itself. However, the code has no effect in preventing the parent page from jumping to the top.
Child page code (Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
Parent page code:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I am having an issue with some expand/collapse code. I would like the p class="heading" tag in the HTML (which is what toggles my expand/collapse box) to move down with the expanding content. Right now the content is expanding and populating below the toggle.
I tried making a fiddle of the code and the expand function wasn't working, so I apologize for not being able to provide one.
The code in question is below.
CSS
<style>
/* mouse over link */
p {
color: rgb(206, 134, 57);
margin-left: -10px;
margin-right: -10px;
margin-bottom: 0px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
p:hover { text-decoration: underline;
cursor: pointer;
color: rgb(206, 134, 57);
-moz-box-shadow: 0 -2px 2px;
-webkit-box-shadow: 0 -2px 2px;
box-shadow: .1px .1px 5px .1px #787878;
}
.heading {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
padding:7px 14px 7px 12px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
text-decoration:none;
background: -moz-linear-gradient(top, #dedede, white 75%);
background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));
border-top: 1px solid #A6A6A6;
outline:none;
}
a {
color: rgb(206, 134, 57);
}
.heading:hover {
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
a:hover {
color: rgb(137, 90, 39);
}
.transition {
border: 1px solid #A6A6A6;
border-radius: 5px;
background:white;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
.transition:hover {
background:#e6ebef;
box-shadow: .1px .1px 5px .1px #787878;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
</style>
JQuery/JavaScript
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(this).next(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
</script>
HTML
<div class="transition"><span style="font-weight: bold; font-size: 18px; color: rgb(0, 130, 200);"><u>Tree Removal Permit</u><br>
</span> <br>
A tree removal permit is required for removal of any tree on a commercial or multi-family property.<br>
<p class="heading">Click here for more information... </p>
<div class="content">
<div style="height:7px;font-size:7px;"> </div>
<span style="font-size: 14px; color: rgb(6, 78, 137);"><b>Online Application Process</b></span>
<ul>
<li type="square">For an easy, step-by-step permit application process visit our Online Licensing and Permitting Portal</a>.</li>
</ul>
<div style="height:7px;font-size:7px;"> </div>
</div>
</div>
Any help would be greatly appreciated!
You have your <div class="content".. above your less information button. Put that before the <p class="heading".. and change this line
jQuery(this).next(".content").slideToggle(500);
to
jQuery(this).prev(".content").slideToggle(500);
is this what you meant? https://jsfiddle.net/inkedraskal/319j8vwr/
You needed to move the "p" tag to below the "content" div, and then just switch up the js accordingly:
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
I'm searching for existing scripts that will animate a vertical text menu by blurring text and zooming it according to the mouse pointer.
I'm trying to accomplish these actions:
OS X-like movement on mouse hover that can 'zoom' the text in and out
In an un-focused state, the text would be blurred
When a user moved their pointer closer to the text, the text would sharpen.
Here's a Flash example that demonstrates some of the effects, but I'd really prefer to use JavaScript and not use 'down', 'up' and 'select' buttons, naturally.
I'm not sure that you can do this in Javascript...
Here is an open source script that I think could work for you (Or at least after minor modifications)
http://marcgrabanski.com/pages/code/fisheye-menu
And a tutorial on using it:
http://simply-basic.com/tools/fisheye-menu-for-your-website/
Edit:
I realized that the script above probably wouldn't handle text very well. Unfortunately blurring text is not easily done in javascript. It might be possible using the canvas element, but I was unable to find anything in a quick Google search and this would likely not be compatible with older browsers.
Here is another script that has a fisheye effect on text items in a list: http://aleph-null.tv/article/20080522-1839-265.xml/Text-based-Fish-Eye-Effect. This is probably closer to what you're looking for, but it's definitely not as smooth and doesn't allow you to blur text like flash does.
Not a strict answer to this old question, but today you can implement something like this easily with CSS3 (without any javascript):
.fancy-bar {
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.fancy-bar .item {
display: inline-block;
margin: 5px;
}
.fancy-bar .item .ball {
width: 40px;
height: 40px;
margin: 0 auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.fancy-bar .item-black .ball {
background-color: black;
}
.fancy-bar .item-red .ball {
background-color: red;
}
.fancy-bar .item-green .ball {
background-color: green;
}
.fancy-bar .item-brown .ball {
background-color: brown;
}
.fancy-bar .item-orange .ball {
background-color: orange;
}
.fancy-bar .item:hover .ball {
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.fancy-bar .item .title {
text-align: center;
font-size: 11px;
font-family: sans-serif;
color: #ccc;
text-shadow: #777 0px 0px 2px;
opacity: 0.8;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
}
.fancy-bar .item:hover .title {
font-size: 13px;
opacity: 1;
text-shadow: none;
}
.fancy-bar .item-black:hover .title {
color: black;
}
.fancy-bar .item-red:hover .title {
color: red;
}
.fancy-bar .item-green:hover .title {
color: green;
}
.fancy-bar .item-brown:hover .title {
color: brown;
}
.fancy-bar .item-orange:hover .title {
color: orange;
}
<div class="fancy-bar">
<div class="item item-black">
<div class="ball"></div>
<div class="title">First</div>
</div>
<div class="item item-red">
<div class="ball"></div>
<div class="title">Second</div>
</div>
<div class="item item-green">
<div class="ball"></div>
<div class="title">Third</div>
</div>
<div class="item item-brown">
<div class="ball"></div>
<div class="title">Fourth</div>
</div>
<div class="item item-orange">
<div class="ball"></div>
<div class="title">Fifth</div>
</div>
</div>