Here I want to select attributes at one time. On hover icon1 then test1 should be visible same as for others also. I have tried like this but it's not working. Can anyone suggest me in the direction
$('[class^="cr-icon"]').hover(function() {
$('[class^="cr-box"]').css("opacity", "1");
}, function() {
$('[class^="cr-box"]').css("opacity", "0");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cr-icons">
<svg>
<path class="cr-icon-1">icon main image</path>
<path class="cr-icon-1">icon inner img</path>
<path class="cr-icon-2">icon main image</path>
<path class="cr-icon-3">icon3</path>
<path class="cr-icon-2">icon inner img</path>
</svg>
</div>
<div class="cr-wrap">
<div class="cr-box-1">test1</div>
<div class="cr-box-2">test2</div>
<div class="cr-box-3">test3</div>
</div>I have done some amendment to your code. Hope this will help you in what you are looking for. The only changes I've made is to give each of the icon an id and based on the id you can show the respective text. I have change the icon to button as for my reference. You can change it back to an icon. I've attached a fiddle for your ease of use.
JS Fiddle example latest
HTML
<div class="cr-wrap">
<button class="cr-icon-1" data-id="1">icon 1</button>
<button class="cr-icon-2" data-id="2">icon 2</button>
<button class="cr-icon-3" data-id="3">icon 3</button>
</div>
<div class="cr-wrap">
<div class="cr-box-1 default">test1</div>
<div class="cr-box-2">test2</div>
<div class="cr-box-3">test3</div>
</div>
JQUERY
$('[class^="cr-box"]').not('.default').css("opacity", "0");
$('[class^="cr-icon"]').hover(function (i, e) {
var id = $(this).attr('data-id');
var el = $('[class^="cr-box"]')[id - 1];
$(el).css("opacity", "1");
}, function (i, e) {
var id = $(this).attr('data-id');
$('[class^="cr-icon"]').each(function (i, e) {
if (id != $(e).attr('data-id')) {
var el = $('[class^="cr-box"]')[id - 1];
$(el).not('.default').css("opacity", "0");
}
});
});