We Keep Coding

How can I hover over an element then click

I want to hover over the "My Account" button and the click the "Login" button opened popup. I have tried the below code but it did not work. Does anyone know a way to handle this situation?
Cypress.Commands.add('loginol', (email, password) => {
cy.get('#myAccount').click()
cy.get('#myAccount').trigger('mouseover')
cy.wait(3000)
cy.get('#login').click()
cy.get('#email').type(email)
cy.get('#password').type(password)
cy.get('.btn.full.btn-login-submit').click()
})
I have uploaded the pictures in case it helps:
"Giriş Yap (My Account)" Button
After it is hovered below "Giriş Yap (Login)" Button
Website I'm working on: https://www.hepsiburada.com/

//cypress doesn't know how to hover so 'invoke' call JQuery 'show' method which force menu to become visible
cy.get('#myAccount').invoke('show');
that worked for me.

You don't have unique id's, assign unique id's to your elements
From the source code of your website:
So what happens is you are triggering the mouseover on the widget, the first myAccount item, the widget container. On this item you don't have any events bound, they are bound on the second item tagged with id="myAccount"
ID needs to be unique
To resolve make the id of your button something like id="myAccount_button" and target that in your test script.
Below is a snippet that simulates your website. It doesn't show the menu.
$('#myAccount').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount">
<div id="myAccount" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>
This is the snippet with the fix. As you can see, the menu shows here, because the ID is unique and can be targeted.
$('#myAccount_button').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount_wrap">
<div id="myAccount_button" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>

For a workaround and from the official cypress website they're mentioning cypress-real-events plugin which can be helpful for a real events that require event.isTrusted to be true, it provide hover and more real events, so you can use it as a real user and test your elements such as a tool-tip messages, expendable lists,... etc.
Note: for current time it support only chromium's based web browsers

modify the default tab display structure

I am working on angularJS. I have created tabs using angularJS, want to modify the way the tabs looks.
I wanted to display the tabs with rounded corners as shown in the image below.
I was having tough time to achieve this using css.
Please suggest how can i get the rounded corners of the tabs as shown in the above image.
Please find my working code here http://plnkr.co/edit/niK4d4YEdkSkZy2UZiHX?p=preview
CSS Code:
<style>
.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
background-color: #D0D0D0;
}
</style>
HTML Code:
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
--some dynamic content here--
</div>
</tab>
</tabset>
Please suggest the best possible way to achieve the rounded corners for the tabs displayed. I can use CSS or bootstrap to achieve this.

Bootstrap affix won't change active tab

The code is written by a former front-end developer of my company. After he left, I was asked to edit this page. When I finished working on CSS, I found the affix which formerly worked, will always activate the last li element. I tried a lot of ways but have no idea why this is happening.
Example code:
<ul id="myNav" class="nav nav-tabs nav-stacked">
<li>关于Speed Dating</li>
<li>活动流程</li>
<li>成功案例</li>
<li>往期回顾</li>
<li>地点</li>
<li>合作伙伴</li>
</ul>
......
<h2 id="section-1">关于Speed Dating</h2>
<h2 id="section-2">关于Speed Dating</h2>
......
The whole code is on CodePen

Finally, I found it's because the former marked with attributes data-spy="scroll" data-target="#myScrollspy" was now on a div element.
I deleted the body tag because the former HTML has two body tag, the first one is set in the base template, and the second one is written in HTML to bind bootstrap affix. So bootstrap affix doesn't work after I change the second body tag to div.
TL,NR: It fixed after I add attributes data-spy="scroll" data-target="#myScrollspy" to body element.

Hide div by default and show it on click with bootstrap

I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>

Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>

Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}

Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>

I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>

context menu for printing the page printing the context menu itself

I am building a context menu on a page that has just one picture and I want users to have only two options whey they right click: print or close the page.
Everything works fine except when they print it, the context menu gets printed as well.
How do I remove the menu as soon as print is clicked so it is not printed?
Here is a fiddle:
View: http://jsbin.com/eQiToLA/2
Edit: http://jsbin.com/eQiToLA/2/edit
$(document).ready(function(){
$('#imgContainerDiv').vscontext({menuBlock: 'vs-context-menu'});
});
My markup here:
<body>
<div id="imgContainerDiv">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" alt="city" />
</div>
<div class="vs-context-menu">
<ul>
<li class="print">Print</li>
<li class="exit">Close</li>
</ul>
</div>
</body>

CSS Print Media can be used to apply styles for printing.
#media print {
.vs-context-menu {display:none;}
}
or you can have a seperate stylesheet
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">

Add a print stylesheet that hides any elements you don't want printed.
Typically a print stylesheet will optimize the page for reading on paper, such as removing the header image, setting the text to black on white, and removing any non-essential elements.